Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[data grid] GridToolbar filter 'is any of' selection is showing outlined input instead of regular input #13104

Open
tdcaot opened this issue May 13, 2024 · 1 comment · May be fixed by #13129
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! feature: Filtering Related to the data grid Filtering feature good first issue Great for first contributions. Enable to learn the contribution process.

Comments

@tdcaot
Copy link

tdcaot commented May 13, 2024

Steps to reproduce

Anywhere where have the Datagrid filter, is any of selection.
Link to live example: https://mui.com/x/react-data-grid/filtering/multi-filters/

Steps:

  1. Access DataGrid(Free edition)
  2. Open FILTER menu
  3. Select 'is any of' in Operator(the value input field is become the outlined)
    image
    image

Current behavior

FILTER > 'is any of' Operator(the value input field is become the outlined)

Expected behavior

Regular variant displayed just like another Operator selection

Context

No response

Your environment

npx @mui/envinfo
  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 21.7.3 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (123.0.2420.97)
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4
    @emotion/styled: ^11.11.5 => 11.11.5
    @mui/base:  5.0.0-beta.40
    @mui/core-downloads-tracker:  5.15.17
    @mui/icons-material: ^5.15.17 => 5.15.17
    @mui/material: ^5.15.17 => 5.15.17
    @mui/private-theming:  5.15.14
    @mui/styled-engine:  5.15.14
    @mui/system: ^5.15.15 => 5.15.15
    @mui/types:  7.2.14
    @mui/utils:  5.15.14
    @mui/x-data-grid: ^7.3.2 => 7.3.2
    @mui/x-date-pickers: ^7.3.2 => 7.3.2
    @types/react: ^18 => 18.3.1
    react: ^18 => 18.3.1
    react-dom: ^18 => 18.3.1
    typescript: ^5 => 5.4.5

Search keywords: GridToolbar, is any of, filter

@tdcaot tdcaot added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label May 13, 2024
@zannager zannager added the component: data grid This is the name of the generic UI component, not the React module! label May 13, 2024
@michelengelen michelengelen changed the title GridToolbar filter 'is any of' selection is showing outlined input instead of regular input [data grid] GridToolbar filter 'is any of' selection is showing outlined input instead of regular input May 14, 2024
@michelengelen michelengelen added bug 🐛 Something doesn't work good first issue Great for first contributions. Enable to learn the contribution process. feature: Filtering Related to the data grid Filtering feature and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels May 14, 2024
@michelengelen
Copy link
Member

Hey @tdcaot
thanks for raising this.
It's a relatively easy fix, so I'll add the gfi label.
here is a diff to get it started:

diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleValue.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleValue.tsx
index eb8bac5c6..ffa56e4b4 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleValue.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleValue.tsx
@@ -21,7 +21,7 @@ function GridFilterInputMultipleValue(props: GridFilterInputMultipleValueProps)
     error,
     helperText,
     size,
-    variant,
+    variant = 'standard',
     ...other
   } = props;
   const TextFieldProps = {

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! feature: Filtering Related to the data grid Filtering feature good first issue Great for first contributions. Enable to learn the contribution process.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants