[data grid] Styling of GridFilterInputSingleSelect is not correctly applied

[Jul13nT]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

This issue is visible directly on the documentation.

• Use this codesandbox: https://codesandbox.io/s/khcbxs?file=/demo.js
• Open the filter panel
• Add a filter on the column Country
• The singleSelect label is not correctly positioned

Current behavior 😯

When using a variant other than standard for styling singleSelect inputs in Data Grid filter panel using the following code:

filterFormProps: {
  valueInputProps: {
    InputComponentProps: {
      variant: 'outlined',
      size: 'small',
    },
  },
},

The variant is not applied to the label:

Expected behavior 🤔

The label should be correctly positioned.

Context 🔦

I think this is due to this line: https://github.com/mui/mui-x/blob/master/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx#L132

The prop spreading should be below variant="standard".

The label was correctly positioned in MUI-X 5.

Your environment 🌎

No response

Order ID or Support key 💳 (optional)

#49931

[m4theushw]

This can be fixed with the diff below:

diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
index 40401a033..2f7b3d57b 100644
--- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
+++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { TextFieldProps } from '@mui/material/TextField';
+import FormControl, { FormControlProps } from '@mui/material/FormControl';
 import { unstable_useId as useId } from '@mui/utils';
 import { GridFilterInputValueProps } from './GridFilterInputValueProps';
 import { GridSingleSelectColDef } from '../../../models/colDef/gridColDef';
@@ -41,7 +41,7 @@ const renderSingleSelectOptions = ({
 };
 
 export type GridFilterInputSingleSelectProps = GridFilterInputValueProps &
-  TextFieldProps &
+  FormControlProps &
   Pick<GridSingleSelectColDef, 'getOptionLabel' | 'getOptionValue'> & {
     type?: 'singleSelect';
   };
@@ -127,12 +127,11 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
   const label = apiRef.current.getLocaleText('filterPanelInputLabel');
 
   return (
-    <React.Fragment>
+    <FormControl {...others}>
       <rootProps.slots.baseInputLabel
         {...rootProps.slotProps?.baseInputLabel}
         id={labelId}
         shrink
-        variant="standard"
       >
         {label}
       </rootProps.slots.baseInputLabel>
@@ -142,13 +141,13 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
         labelId={labelId}
         value={filterValueState}
         onChange={onFilterChange}
-        variant="standard"
         type={type || 'text'}
         inputProps={{
           ref: focusElementRef,
           placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
         }}
         native={isSelectNative}
+        notched={isSelectNative && others.variant === 'outlined'}
         {...others}
         {...rootProps.slotProps?.baseSelect}
       >
@@ -161,7 +160,7 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
           baseSelectOptionProps: rootProps.slotProps?.baseSelectOption,
         })}
       </rootProps.slots.baseSelect>
-    </React.Fragment>
+    </FormControl>
   );
 }

Changing the interfaces could be considered a breaking change.

[Jul13nT]

An additional symptom of this issue (I think) is the absence of for accessibility tag on the label. This can cause tools relying on this for selecting fields (like e2e testing with Playwright) to fail.

[Jul13nT]

Is there a fix planned for this issue? I'm stuck upgrading to v6 because my Playwright tests are failing due to this issue.

[m4theushw]

Is there a fix planned for this issue?

The fix is in #8703 (comment) but we don't have an estimation of when it will be delivered. It's in our backlog.

An additional symptom of this issue (I think) is the absence of for accessibility tag on the label.

This can be fixed with the diff below:

diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
index 40401a033..7782261ad 100644
--- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
+++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
@@ -131,6 +131,7 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
       <rootProps.slots.baseInputLabel
         {...rootProps.slotProps?.baseInputLabel}
         id={labelId}
+        htmlFor={id}
         shrink
         variant="standard"
       >

Do you want to submit a PR?

[Jul13nT]

Done ! Thanks for the patches !

[Jul13nT]

This issue needs to be reopened. Only the accessibility problem has been fixed by #9018

[m4theushw]

An alternative without breaking changes is the following:

diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
index 09860164e..bc40b33f6 100644
--- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
+++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
@@ -34,6 +34,7 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
     clearButton,
     tabIndex,
     label: labelProp,
+    variant = 'standard',
     ...others
   } = props;
   const [filterValueState, setFilterValueState] = React.useState(item.value || '');
@@ -69,7 +70,7 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
           {...rootProps.slotProps?.baseInputLabel}
           id={labelId}
           shrink
-          variant="standard"
+          variant={variant}
         >
           {label}
         </rootProps.slots.baseInputLabel>
@@ -79,7 +80,7 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
           label={label}
           value={filterValueState}
           onChange={onFilterChange}
-          variant="standard"
+          variant={variant}
           native={isSelectNative}
           displayEmpty
           startAdornment={isFilterActive ? headerFilterMenu : null}
diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
index f8a08f0f3..be4533bdc 100644
--- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
+++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { InputLabelProps } from '@mui/material/InputLabel'
 import { TextFieldProps } from '@mui/material/TextField';
 import { SelectChangeEvent } from '@mui/material/Select';
 import { unstable_useId as useId } from '@mui/utils';
@@ -59,6 +60,7 @@ export type GridFilterInputSingleSelectProps = GridFilterInputValueProps &
      */
     isFilterActive?: boolean;
     type?: 'singleSelect';
+    InputLabelProps?: InputLabelProps
   };
 
 function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
@@ -76,6 +78,8 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
     headerFilterMenu,
     isFilterActive,
     clearButton,
+    variant = 'standard',
+    InputLabelProps: InputLabelPropsProp,
     ...others
   } = props;
   const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
@@ -154,7 +158,8 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
           {...rootProps.slotProps?.baseInputLabel}
           id={labelId}
           shrink
-          variant="standard"
+          variant={variant}
+          {...InputLabelPropsProp}
         >
           {label}
         </rootProps.slots.baseInputLabel>
@@ -165,7 +170,7 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
           value={filterValueState}
           onChange={onFilterChange}
           startAdornment={isFilterActive ? headerFilterMenu : null}
-          variant="standard"
+          variant={variant}
           type={type || 'text'}
           inputProps={{
             tabIndex,
diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx
index f590bc774..18ab87999 100644
--- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx
+++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx
@@ -32,6 +32,7 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) {
     isFilterActive,
     clearButton,
     InputProps,
+    variant = 'standard',
     ...others
   } = props;
   const filterTimeout = React.useRef<any>();
@@ -73,7 +74,7 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) {
       placeholder={apiRef.current.getLocaleText('filterPanelInputPlaceholder')}
       value={filterValueState}
       onChange={onFilterChange}
-      variant="standard"
+      variant={variant}
       type={type || 'text'}
       InputProps={{
         ...(applying || clearButton

By doing so, the way to change the variant will require to override the filter operators as follow:

const columns = data.columns.map((column) => {
  if (column.type === 'singleSelect') {
    return {
      ...column,
      filterOperators: getGridSingleSelectOperators().map((operator) => ({
        ...operator,
        InputComponentProps: {
          variant: 'filled',
        }
      })),
    };
  }
  return column;
});

[FreakDroid]

Hello. I have the same problem so I think this issue hasn't been resolved yet.

Do you have any workaround for this? Notched is not working for me.

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @Jul13nT?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.