Fixing: mui#8703

-GridFilterInputSingleSelect is not correctly applied for outlined variant
FreakDroid · Dec 26, 2023 · 687eaf3 · 687eaf3
1 parent 42ee0c4
commit 687eaf3
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
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
@@ -35,7 +35,7 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
     clearButton,
     tabIndex,
     label: labelProp,
-    variant = "standard",
+    variant = 'standard',
     InputLabelProps,
     ...others
   } = props;
@@ -72,7 +72,7 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
           {...rootProps.slotProps?.baseInputLabel}
           id={labelId}
           shrink
-          variant="standard"
+          variant={variant}
         >
           {label}
         </rootProps.slots.baseInputLabel>
@@ -83,6 +83,7 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
           value={filterValueState}
           onChange={onFilterChange}
           variant={variant}
+          notched={variant === 'outlined'}
           native={isSelectNative}
           displayEmpty
           inputProps={{ ref: focusElementRef, tabIndex }}

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
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { InputLabelProps } from '@mui/material/InputLabel'
+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';
@@ -65,7 +65,7 @@ export type GridFilterInputSingleSelectProps = GridFilterInputValueProps &
      */
     isFilterActive?: boolean;
     type?: 'singleSelect';
-    inputLabelProps?: InputLabelProps
+    inputLabelProps?: InputLabelProps;
   };
 
 function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
@@ -78,7 +78,7 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
     placeholder,
     tabIndex,
     label: labelProp,
-    variant = "standard",
+    variant = 'standard',
     isFilterActive,
     clearButton,
     inputLabelProps,
@@ -150,6 +150,7 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
             placeholder: placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
           }}
           native={isSelectNative}
+          notched={variant === 'outlined'}
           {...others}
           {...rootProps.slotProps?.baseSelect}
         >
@@ -182,6 +183,7 @@ GridFilterInputSingleSelect.propTypes = {
     PropTypes.func,
     PropTypes.object,
   ]),
+  inputLabelProps: PropTypes.object,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (e.g. `isEmpty`)