From 632457bebfc9c1f7d1081b6b0445c4eb6f6228bd Mon Sep 17 00:00:00 2001
From: kyeongsoosoo <shakramon@naver.com>
Date: Sat, 2 Apr 2022 16:13:31 +0900
Subject: [PATCH 1/6] [DataGrid] Enable using MUI Select Component

---
 .../cell/GridEditSingleSelectCell.tsx         |  1 +
 .../src/components/panel/GridPanel.tsx        |  2 +-
 .../panel/filterPanel/GridFilterForm.tsx      | 68 +++++++++++++------
 .../filterPanel/GridFilterInputBoolean.tsx    | 40 +++++++++--
 .../GridFilterInputSingleSelect.tsx           | 41 ++++++++---
 .../filterPanel/GridFilterInputValue.tsx      | 36 +++++++---
 6 files changed, 140 insertions(+), 48 deletions(-)

diff --git a/packages/grid/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx
index a78afe0dfde9a..dc3974643c7f0 100644
--- a/packages/grid/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx
+++ b/packages/grid/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx
@@ -137,6 +137,7 @@ function GridEditSingleSelectCell(props: GridRenderEditCellParams & Omit<SelectP
       fullWidth
       {...other}
       {...rootProps.componentsProps?.baseSelect}
+      native={false}
     >
       {valueOptionsFormatted.map(renderSingleSelectOptions)}
     </rootProps.components.BaseSelect>
diff --git a/packages/grid/x-data-grid/src/components/panel/GridPanel.tsx b/packages/grid/x-data-grid/src/components/panel/GridPanel.tsx
index cf53ad89018ae..07cf2a65bd779 100644
--- a/packages/grid/x-data-grid/src/components/panel/GridPanel.tsx
+++ b/packages/grid/x-data-grid/src/components/panel/GridPanel.tsx
@@ -106,7 +106,7 @@ const GridPanel = React.forwardRef<HTMLDivElement, GridPanelProps>((props, ref)
       modifiers={modifiers}
       {...other}
     >
-      <ClickAwayListener onClickAway={handleClickAway}>
+      <ClickAwayListener mouseEvent="onMouseUp" onClickAway={handleClickAway}>
         <GridPaperRoot className={classes.paper} elevation={8} onKeyDown={handleKeyDown}>
           {isPlaced && children}
         </GridPaperRoot>
diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx
index c98cf21a6a98b..1436ee22e1ccb 100644
--- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx
+++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { MenuItem, unstable_composeClasses as composeClasses } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import InputLabel from '@mui/material/InputLabel';
 import FormControl from '@mui/material/FormControl';
@@ -152,6 +152,9 @@ function GridFilterForm(props: GridFilterFormProps) {
 
   const baseFormControlProps = rootProps.componentsProps?.baseFormControl || {};
 
+  const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
+  const isBaseSelectNative = baseSelectProps.native ?? true;
+
   const sortedFilterableColumns = React.useMemo(() => {
     switch (columnsSort) {
       case 'asc':
@@ -314,14 +317,20 @@ function GridFilterForm(props: GridFilterFormProps) {
           value={multiFilterOperator}
           onChange={changeLinkOperator}
           disabled={!!disableMultiFilterOperator || linkOperators.length === 1}
-          native
+          native={isBaseSelectNative}
           {...rootProps.componentsProps?.baseSelect}
         >
-          {linkOperators.map((linkOperator) => (
-            <option key={linkOperator.toString()} value={linkOperator.toString()}>
-              {apiRef.current.getLocaleText(getLinkOperatorLocaleKey(linkOperator))}
-            </option>
-          ))}
+          {linkOperators.map((linkOperator) =>
+            isBaseSelectNative ? (
+              <option key={linkOperator.toString()} value={linkOperator.toString()}>
+                {apiRef.current.getLocaleText(getLinkOperatorLocaleKey(linkOperator))}
+              </option>
+            ) : (
+              <MenuItem key={linkOperator.toString()} value={linkOperator.toString()}>
+                {apiRef.current.getLocaleText(getLinkOperatorLocaleKey(linkOperator))}
+              </MenuItem>
+            ),
+          )}
         </rootProps.components.BaseSelect>
       </FilterFormLinkOperatorInput>
       <FilterFormColumnInput
@@ -344,14 +353,20 @@ function GridFilterForm(props: GridFilterFormProps) {
           label={apiRef.current.getLocaleText('filterPanelColumns')}
           value={item.columnField || ''}
           onChange={changeColumn}
-          native
+          native={isBaseSelectNative}
           {...rootProps.componentsProps?.baseSelect}
         >
-          {sortedFilterableColumns.map((col) => (
-            <option key={col.field} value={col.field}>
-              {getColumnLabel(col)}
-            </option>
-          ))}
+          {sortedFilterableColumns.map((col) =>
+            isBaseSelectNative ? (
+              <option key={col.field} value={col.field}>
+                {getColumnLabel(col)}
+              </option>
+            ) : (
+              <MenuItem key={col.field} value={col.field}>
+                {getColumnLabel(col)}
+              </MenuItem>
+            ),
+          )}
         </rootProps.components.BaseSelect>
       </FilterFormColumnInput>
       <FilterFormOperatorInput
@@ -374,18 +389,27 @@ function GridFilterForm(props: GridFilterFormProps) {
           id={operatorSelectId}
           value={item.operatorValue}
           onChange={changeOperator}
-          native
+          native={isBaseSelectNative}
           inputRef={filterSelectorRef}
           {...rootProps.componentsProps?.baseSelect}
         >
-          {currentColumn?.filterOperators?.map((operator) => (
-            <option key={operator.value} value={operator.value}>
-              {operator.label ||
-                apiRef.current.getLocaleText(
-                  `filterOperator${capitalize(operator.value)}` as GridTranslationKeys,
-                )}
-            </option>
-          ))}
+          {currentColumn?.filterOperators?.map((operator) =>
+            isBaseSelectNative ? (
+              <option key={operator.value} value={operator.value}>
+                {operator.label ||
+                  apiRef.current.getLocaleText(
+                    `filterOperator${capitalize(operator.value)}` as GridTranslationKeys,
+                  )}
+              </option>
+            ) : (
+              <MenuItem key={operator.value} value={operator.value}>
+                {operator.label ||
+                  apiRef.current.getLocaleText(
+                    `filterOperator${capitalize(operator.value)}` as GridTranslationKeys,
+                  )}
+              </MenuItem>
+            ),
+          )}
         </rootProps.components.BaseSelect>
       </FilterFormOperatorInput>
       <FilterFormValueInput
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 8618a385642bb..136ee08e115bb 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
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { TextFieldProps } from '@mui/material/TextField';
+import { MenuItem } from '@mui/material';
 import { GridFilterInputValueProps } from './GridFilterInputValueProps';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 
@@ -8,6 +9,9 @@ export function GridFilterInputBoolean(props: GridFilterInputValueProps & TextFi
   const [filterValueState, setFilterValueState] = React.useState(item.value || '');
   const rootProps = useGridRootProps();
 
+  const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
+  const isSelectNative = baseSelectProps.native ?? true;
+
   const onFilterChange = React.useCallback(
     (event) => {
       const value = event.target.value;
@@ -21,6 +25,32 @@ export function GridFilterInputBoolean(props: GridFilterInputValueProps & TextFi
     setFilterValueState(item.value || '');
   }, [item.value]);
 
+  if (isSelectNative) {
+    return (
+      <rootProps.components.BaseTextField
+        label={apiRef.current.getLocaleText('filterPanelInputLabel')}
+        value={filterValueState}
+        onChange={onFilterChange}
+        variant="standard"
+        select
+        SelectProps={{
+          native: true,
+          ...rootProps.componentsProps?.baseSelect,
+        }}
+        InputLabelProps={{
+          shrink: true,
+        }}
+        inputRef={focusElementRef}
+        {...others}
+        {...rootProps.componentsProps?.baseTextField}
+      >
+        <option value="">{apiRef.current.getLocaleText('filterValueAny')}</option>
+        <option value="true">{apiRef.current.getLocaleText('filterValueTrue')}</option>
+        <option value="false">{apiRef.current.getLocaleText('filterValueFalse')}</option>
+      </rootProps.components.BaseTextField>
+    );
+  }
+
   return (
     <rootProps.components.BaseTextField
       label={apiRef.current.getLocaleText('filterPanelInputLabel')}
@@ -29,7 +59,9 @@ export function GridFilterInputBoolean(props: GridFilterInputValueProps & TextFi
       variant="standard"
       select
       SelectProps={{
-        native: true,
+        displayEmpty: true,
+        native: false,
+        ...rootProps.componentsProps?.baseSelect,
       }}
       InputLabelProps={{
         shrink: true,
@@ -38,9 +70,9 @@ export function GridFilterInputBoolean(props: GridFilterInputValueProps & TextFi
       {...others}
       {...rootProps.componentsProps?.baseTextField}
     >
-      <option value="">{apiRef.current.getLocaleText('filterValueAny')}</option>
-      <option value="true">{apiRef.current.getLocaleText('filterValueTrue')}</option>
-      <option value="false">{apiRef.current.getLocaleText('filterValueFalse')}</option>
+      <MenuItem value="">{apiRef.current.getLocaleText('filterValueAny')}</MenuItem>
+      <MenuItem value="true">{apiRef.current.getLocaleText('filterValueTrue')}</MenuItem>
+      <MenuItem value="false">{apiRef.current.getLocaleText('filterValueFalse')}</MenuItem>
     </rootProps.components.BaseTextField>
   );
 }
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 5696f5d24eefb..f9bbebe5f721d 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
@@ -2,6 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { TextFieldProps } from '@mui/material/TextField';
 import { unstable_useId as useId } from '@mui/material/utils';
+import { MenuItem } from '@mui/material';
 import { GridFilterInputValueProps } from './GridFilterInputValueProps';
 import { GridColDef } from '../../../models/colDef/gridColDef';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
@@ -11,23 +12,33 @@ import { getValueFromValueOptions } from './filterPanelUtils';
 const renderSingleSelectOptions = (
   { valueOptions, valueFormatter, field }: GridColDef,
   api: GridApiCommunity,
+  isSelectNative: boolean,
 ) => {
   const iterableColumnValues =
     typeof valueOptions === 'function'
       ? ['', ...valueOptions({ field })]
       : ['', ...(valueOptions || [])];
 
-  return iterableColumnValues.map((option) =>
-    typeof option === 'object' ? (
-      <option key={option.value} value={option.value}>
-        {option.label}
+  return iterableColumnValues.map((option) => {
+    const isOptionTypeObject = typeof option === 'object';
+
+    const key = isOptionTypeObject ? option.value : option;
+    const value = isOptionTypeObject ? option.value : option;
+
+    const contentWhenOptionisNotObject =
+      valueFormatter && option !== '' ? valueFormatter({ value: option, field, api }) : option;
+    const content = isOptionTypeObject ? option.label : contentWhenOptionisNotObject;
+
+    return isSelectNative ? (
+      <option key={key} value={value}>
+        {content}
       </option>
     ) : (
-      <option key={option} value={option}>
-        {valueFormatter && option !== '' ? valueFormatter({ value: option, field, api }) : option}
-      </option>
-    ),
-  );
+      <MenuItem key={key} value={value}>
+        {content}
+      </MenuItem>
+    );
+  });
 };
 
 export type GridFilterInputSingleSelectProps = GridFilterInputValueProps &
@@ -39,6 +50,9 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
   const id = useId();
   const rootProps = useGridRootProps();
 
+  const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
+  const isSelectNative = baseSelectProps.native ?? true;
+
   const currentColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
 
   const currentValueOptions = React.useMemo(() => {
@@ -94,12 +108,17 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
       inputRef={focusElementRef}
       select
       SelectProps={{
-        native: true,
+        native: isSelectNative,
+        ...rootProps.componentsProps?.baseSelect,
       }}
       {...others}
       {...rootProps.componentsProps?.baseTextField}
     >
-      {renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current)}
+      {renderSingleSelectOptions(
+        apiRef.current.getColumn(item.columnField),
+        apiRef.current,
+        isSelectNative,
+      )}
     </rootProps.components.BaseTextField>
   );
 }
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 6477e43d9d41e..efcb4f4196dff 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
@@ -2,6 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { TextFieldProps } from '@mui/material/TextField';
 import { unstable_useId as useId } from '@mui/material/utils';
+import { MenuItem } from '@mui/material';
 import { GridLoadIcon } from '../../icons';
 import { GridFilterInputValueProps } from './GridFilterInputValueProps';
 import { GridColDef } from '../../../models/colDef/gridColDef';
@@ -24,23 +25,33 @@ function warnDeprecatedTypeSupport(type: string) {
 const renderSingleSelectOptions = (
   { valueOptions, valueFormatter, field }: GridColDef,
   api: GridApiCommunity,
+  isSelectNative: boolean,
 ) => {
   const iterableColumnValues =
     typeof valueOptions === 'function'
       ? ['', ...valueOptions({ field })]
       : ['', ...(valueOptions || [])];
 
-  return iterableColumnValues.map((option) =>
-    typeof option === 'object' ? (
-      <option key={option.value} value={option.value}>
-        {option.label}
+  return iterableColumnValues.map((option) => {
+    const isOptionTypeObject = typeof option === 'object';
+
+    const key = isOptionTypeObject ? option.value : option;
+    const value = isOptionTypeObject ? option.value : option;
+
+    const contentWhenOptionisNotObject =
+      valueFormatter && option !== '' ? valueFormatter({ value: option, field, api }) : option;
+    const content = isOptionTypeObject ? option.label : contentWhenOptionisNotObject;
+
+    return isSelectNative ? (
+      <option key={key} value={value}>
+        {content}
       </option>
     ) : (
-      <option key={option} value={option}>
-        {valueFormatter && option !== '' ? valueFormatter({ value: option, field, api }) : option}
-      </option>
-    ),
-  );
+      <MenuItem key={key} value={value}>
+        {content}
+      </MenuItem>
+    );
+  });
 };
 
 export const SUBMIT_FILTER_STROKE_TIME = 500;
@@ -63,16 +74,21 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps & TextFieldPr
   const [applying, setIsApplying] = React.useState(false);
   const id = useId();
   const rootProps = useGridRootProps();
+
+  const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
+  const isSelectNative = baseSelectProps.native ?? true;
+
   const singleSelectProps: TextFieldProps =
     type === 'singleSelect'
       ? {
           select: true,
           SelectProps: {
-            native: true,
+            ...rootProps.componentsProps?.baseSelect,
           },
           children: renderSingleSelectOptions(
             apiRef.current.getColumn(item.columnField),
             apiRef.current,
+            isSelectNative,
           ),
         }
       : {};

From 596ddb291d36ce68cad610003636f8f37fe2fa5c Mon Sep 17 00:00:00 2001
From: kyeongsoosoo <shakramon@naver.com>
Date: Wed, 6 Apr 2022 02:15:25 +0900
Subject: [PATCH 2/6] use helper component for refactor

---
 .../panel/filterPanel/GridFilterForm.tsx      | 81 ++++++++++---------
 .../filterPanel/GridFilterInputBoolean.tsx    | 58 +++++++------
 .../GridFilterInputSingleSelect.tsx           | 31 ++++---
 .../filterPanel/GridFilterInputValue.tsx      | 31 ++++---
 4 files changed, 112 insertions(+), 89 deletions(-)

diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx
index 1436ee22e1ccb..7e1dd4cf4f184 100644
--- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx
+++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { MenuItem, unstable_composeClasses as composeClasses } from '@mui/material';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
+import MenuItem from '@mui/material/MenuItem';
 import InputLabel from '@mui/material/InputLabel';
 import FormControl from '@mui/material/FormControl';
 import { SelectChangeEvent } from '@mui/material/Select';
@@ -102,6 +103,23 @@ const FilterFormValueInput = styled(FormControl, {
   overridesResolver: (_, styles) => styles.filterFormValueInput,
 })({ width: 190 });
 
+interface SelectOptionProps {
+  isNative: boolean;
+  children: React.ReactNode;
+  value: string;
+}
+
+const SelectOption = ({ isNative, children, value, ...props }: SelectOptionProps) =>
+  isNative ? (
+    <option value={value} {...props}>
+      {children}
+    </option>
+  ) : (
+    <MenuItem value={value} {...props}>
+      {children}
+    </MenuItem>
+  );
+
 const getLinkOperatorLocaleKey = (linkOperator: GridLinkOperator) => {
   switch (linkOperator) {
     case GridLinkOperator.And:
@@ -320,17 +338,15 @@ function GridFilterForm(props: GridFilterFormProps) {
           native={isBaseSelectNative}
           {...rootProps.componentsProps?.baseSelect}
         >
-          {linkOperators.map((linkOperator) =>
-            isBaseSelectNative ? (
-              <option key={linkOperator.toString()} value={linkOperator.toString()}>
-                {apiRef.current.getLocaleText(getLinkOperatorLocaleKey(linkOperator))}
-              </option>
-            ) : (
-              <MenuItem key={linkOperator.toString()} value={linkOperator.toString()}>
-                {apiRef.current.getLocaleText(getLinkOperatorLocaleKey(linkOperator))}
-              </MenuItem>
-            ),
-          )}
+          {linkOperators.map((linkOperator) => (
+            <SelectOption
+              isNative={isBaseSelectNative}
+              key={linkOperator.toString()}
+              value={linkOperator.toString()}
+            >
+              {apiRef.current.getLocaleText(getLinkOperatorLocaleKey(linkOperator))}
+            </SelectOption>
+          ))}
         </rootProps.components.BaseSelect>
       </FilterFormLinkOperatorInput>
       <FilterFormColumnInput
@@ -356,17 +372,11 @@ function GridFilterForm(props: GridFilterFormProps) {
           native={isBaseSelectNative}
           {...rootProps.componentsProps?.baseSelect}
         >
-          {sortedFilterableColumns.map((col) =>
-            isBaseSelectNative ? (
-              <option key={col.field} value={col.field}>
-                {getColumnLabel(col)}
-              </option>
-            ) : (
-              <MenuItem key={col.field} value={col.field}>
-                {getColumnLabel(col)}
-              </MenuItem>
-            ),
-          )}
+          {sortedFilterableColumns.map((col) => (
+            <SelectOption isNative={isBaseSelectNative} key={col.field} value={col.field}>
+              {getColumnLabel(col)}
+            </SelectOption>
+          ))}
         </rootProps.components.BaseSelect>
       </FilterFormColumnInput>
       <FilterFormOperatorInput
@@ -393,23 +403,14 @@ function GridFilterForm(props: GridFilterFormProps) {
           inputRef={filterSelectorRef}
           {...rootProps.componentsProps?.baseSelect}
         >
-          {currentColumn?.filterOperators?.map((operator) =>
-            isBaseSelectNative ? (
-              <option key={operator.value} value={operator.value}>
-                {operator.label ||
-                  apiRef.current.getLocaleText(
-                    `filterOperator${capitalize(operator.value)}` as GridTranslationKeys,
-                  )}
-              </option>
-            ) : (
-              <MenuItem key={operator.value} value={operator.value}>
-                {operator.label ||
-                  apiRef.current.getLocaleText(
-                    `filterOperator${capitalize(operator.value)}` as GridTranslationKeys,
-                  )}
-              </MenuItem>
-            ),
-          )}
+          {currentColumn?.filterOperators?.map((operator) => (
+            <SelectOption isNative={isBaseSelectNative} key={operator.value} value={operator.value}>
+              {operator.label ||
+                apiRef.current.getLocaleText(
+                  `filterOperator${capitalize(operator.value)}` as GridTranslationKeys,
+                )}
+            </SelectOption>
+          ))}
         </rootProps.components.BaseSelect>
       </FilterFormOperatorInput>
       <FilterFormValueInput
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 136ee08e115bb..c2a9f96add9e5 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
@@ -4,6 +4,23 @@ import { MenuItem } from '@mui/material';
 import { GridFilterInputValueProps } from './GridFilterInputValueProps';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 
+interface SelectOptionProps {
+  isNative: boolean;
+  children: React.ReactNode;
+  value: string;
+}
+
+const SelectOption = ({ isNative, children, value, ...props }: SelectOptionProps) =>
+  isNative ? (
+    <option value={value} {...props}>
+      {children}
+    </option>
+  ) : (
+    <MenuItem value={value} {...props}>
+      {children}
+    </MenuItem>
+  );
+
 export function GridFilterInputBoolean(props: GridFilterInputValueProps & TextFieldProps) {
   const { item, applyValue, apiRef, focusElementRef, ...others } = props;
   const [filterValueState, setFilterValueState] = React.useState(item.value || '');
@@ -24,33 +41,6 @@ export function GridFilterInputBoolean(props: GridFilterInputValueProps & TextFi
   React.useEffect(() => {
     setFilterValueState(item.value || '');
   }, [item.value]);
-
-  if (isSelectNative) {
-    return (
-      <rootProps.components.BaseTextField
-        label={apiRef.current.getLocaleText('filterPanelInputLabel')}
-        value={filterValueState}
-        onChange={onFilterChange}
-        variant="standard"
-        select
-        SelectProps={{
-          native: true,
-          ...rootProps.componentsProps?.baseSelect,
-        }}
-        InputLabelProps={{
-          shrink: true,
-        }}
-        inputRef={focusElementRef}
-        {...others}
-        {...rootProps.componentsProps?.baseTextField}
-      >
-        <option value="">{apiRef.current.getLocaleText('filterValueAny')}</option>
-        <option value="true">{apiRef.current.getLocaleText('filterValueTrue')}</option>
-        <option value="false">{apiRef.current.getLocaleText('filterValueFalse')}</option>
-      </rootProps.components.BaseTextField>
-    );
-  }
-
   return (
     <rootProps.components.BaseTextField
       label={apiRef.current.getLocaleText('filterPanelInputLabel')}
@@ -59,8 +49,8 @@ export function GridFilterInputBoolean(props: GridFilterInputValueProps & TextFi
       variant="standard"
       select
       SelectProps={{
+        native: isSelectNative,
         displayEmpty: true,
-        native: false,
         ...rootProps.componentsProps?.baseSelect,
       }}
       InputLabelProps={{
@@ -70,9 +60,15 @@ export function GridFilterInputBoolean(props: GridFilterInputValueProps & TextFi
       {...others}
       {...rootProps.componentsProps?.baseTextField}
     >
-      <MenuItem value="">{apiRef.current.getLocaleText('filterValueAny')}</MenuItem>
-      <MenuItem value="true">{apiRef.current.getLocaleText('filterValueTrue')}</MenuItem>
-      <MenuItem value="false">{apiRef.current.getLocaleText('filterValueFalse')}</MenuItem>
+      <SelectOption isNative={isSelectNative} value="">
+        {apiRef.current.getLocaleText('filterValueAny')}
+      </SelectOption>
+      <SelectOption isNative={isSelectNative} value="true">
+        {apiRef.current.getLocaleText('filterValueTrue')}
+      </SelectOption>
+      <SelectOption isNative={isSelectNative} value="false">
+        {apiRef.current.getLocaleText('filterValueFalse')}
+      </SelectOption>
     </rootProps.components.BaseTextField>
   );
 }
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 f9bbebe5f721d..c7b339331b513 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
@@ -9,6 +9,23 @@ import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { getValueFromValueOptions } from './filterPanelUtils';
 
+interface SelectOptionProps {
+  isNative: boolean;
+  children: React.ReactNode;
+  value: any;
+}
+
+const SelectOption = ({ isNative, children, value, ...props }: SelectOptionProps) =>
+  isNative ? (
+    <option value={value} {...props}>
+      {children}
+    </option>
+  ) : (
+    <MenuItem value={value} {...props}>
+      {children}
+    </MenuItem>
+  );
+
 const renderSingleSelectOptions = (
   { valueOptions, valueFormatter, field }: GridColDef,
   api: GridApiCommunity,
@@ -25,18 +42,14 @@ const renderSingleSelectOptions = (
     const key = isOptionTypeObject ? option.value : option;
     const value = isOptionTypeObject ? option.value : option;
 
-    const contentWhenOptionisNotObject =
+    const formattedValue =
       valueFormatter && option !== '' ? valueFormatter({ value: option, field, api }) : option;
-    const content = isOptionTypeObject ? option.label : contentWhenOptionisNotObject;
+    const content = isOptionTypeObject ? option.label : formattedValue;
 
-    return isSelectNative ? (
-      <option key={key} value={value}>
-        {content}
-      </option>
-    ) : (
-      <MenuItem key={key} value={value}>
+    return (
+      <SelectOption isNative={isSelectNative} key={key} value={value}>
         {content}
-      </MenuItem>
+      </SelectOption>
     );
   });
 };
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 efcb4f4196dff..5eab7ed31e7c4 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
@@ -22,6 +22,23 @@ function warnDeprecatedTypeSupport(type: string) {
   warnedOnce[type] = true;
 }
 
+interface SelectOptionProps {
+  isNative: boolean;
+  children: React.ReactNode;
+  value: any;
+}
+
+const SelectOption = ({ isNative, children, value, ...props }: SelectOptionProps) =>
+  isNative ? (
+    <option value={value} {...props}>
+      {children}
+    </option>
+  ) : (
+    <MenuItem value={value} {...props}>
+      {children}
+    </MenuItem>
+  );
+
 const renderSingleSelectOptions = (
   { valueOptions, valueFormatter, field }: GridColDef,
   api: GridApiCommunity,
@@ -38,18 +55,14 @@ const renderSingleSelectOptions = (
     const key = isOptionTypeObject ? option.value : option;
     const value = isOptionTypeObject ? option.value : option;
 
-    const contentWhenOptionisNotObject =
+    const formattedValue =
       valueFormatter && option !== '' ? valueFormatter({ value: option, field, api }) : option;
-    const content = isOptionTypeObject ? option.label : contentWhenOptionisNotObject;
+    const content = isOptionTypeObject ? option.label : formattedValue;
 
-    return isSelectNative ? (
-      <option key={key} value={value}>
-        {content}
-      </option>
-    ) : (
-      <MenuItem key={key} value={value}>
+    return (
+      <SelectOption isNative={isSelectNative} key={key} value={value}>
         {content}
-      </MenuItem>
+      </SelectOption>
     );
   });
 };

From 6caef4685387a01b00e5127b96c6483d016cbc1a Mon Sep 17 00:00:00 2001
From: kyeongsoosoo <shakramon@naver.com>
Date: Wed, 6 Apr 2022 02:16:28 +0900
Subject: [PATCH 3/6] enable using native component in edit-single-select-cell

---
 .../cell/GridEditSingleSelectCell.tsx         | 48 +++++++++++++++----
 .../src/components/cell/editCellUtils.ts      | 17 +++++++
 2 files changed, 55 insertions(+), 10 deletions(-)
 create mode 100644 packages/grid/x-data-grid/src/components/cell/editCellUtils.ts

diff --git a/packages/grid/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx
index dc3974643c7f0..e3507c85faefa 100644
--- a/packages/grid/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx
+++ b/packages/grid/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx
@@ -12,18 +12,39 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridEditModes } from '../../models/gridEditRowModel';
 import { GridEvents } from '../../models/events/gridEvents';
 import { GridColDef, ValueOptions } from '../../models/colDef/gridColDef';
+import { getValueFromValueOptions } from './editCellUtils';
 
-const renderSingleSelectOptions = (option: ValueOptions) =>
-  typeof option === 'object' ? (
-    <MenuItem key={option.value} value={option.value}>
-      {option.label}
-    </MenuItem>
+interface SelectOptionProps {
+  isNative: boolean;
+  children: React.ReactNode;
+  value: any;
+}
+
+const SelectOption = ({ isNative, children, value, ...props }: SelectOptionProps) =>
+  isNative ? (
+    <option value={value} {...props}>
+      {children}
+    </option>
   ) : (
-    <MenuItem key={option} value={option}>
-      {option}
+    <MenuItem value={value} {...props}>
+      {children}
     </MenuItem>
   );
 
+const renderSingleSelectOptions = (option: ValueOptions, isSelectNative: boolean) => {
+  const isOptionTypeObject = typeof option === 'object';
+
+  const key = isOptionTypeObject ? option.value : option;
+  const value = isOptionTypeObject ? option.value : option;
+  const content = isOptionTypeObject ? option.label : option;
+
+  return (
+    <SelectOption isNative={isSelectNative} key={key} value={value}>
+      {content}
+    </SelectOption>
+  );
+};
+
 function GridEditSingleSelectCell(props: GridRenderEditCellParams & Omit<SelectProps, 'id'>) {
   const {
     id,
@@ -51,6 +72,9 @@ function GridEditSingleSelectCell(props: GridRenderEditCellParams & Omit<SelectP
   const rootProps = useGridRootProps();
   const [open, setOpen] = React.useState(rootProps.editMode === 'cell');
 
+  const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
+  const isSelectNative = baseSelectProps.native ?? false;
+
   let valueOptionsFormatted: Array<ValueOptions>;
   if (typeof colDef.valueOptions === 'function') {
     valueOptionsFormatted = colDef.valueOptions!({ id, row, field });
@@ -75,7 +99,9 @@ function GridEditSingleSelectCell(props: GridRenderEditCellParams & Omit<SelectP
   const handleChange = async (event: React.KeyboardEvent<HTMLInputElement>) => {
     setOpen(false);
     const target = event.target as HTMLInputElement;
-    const isValid = await api.setEditCellValue({ id, field, value: target.value }, event);
+    // NativeSelect casts the value to a string.
+    const formattedTargetValue = getValueFromValueOptions(target.value, valueOptionsFormatted);
+    const isValid = await api.setEditCellValue({ id, field, value: formattedTargetValue }, event);
 
     if (rootProps.experimentalFeatures?.newEditingApi) {
       return;
@@ -134,12 +160,14 @@ function GridEditSingleSelectCell(props: GridRenderEditCellParams & Omit<SelectP
         onClose: handleClose,
       }}
       error={error}
+      native={isSelectNative}
       fullWidth
       {...other}
       {...rootProps.componentsProps?.baseSelect}
-      native={false}
     >
-      {valueOptionsFormatted.map(renderSingleSelectOptions)}
+      {valueOptionsFormatted.map((valueOptions) =>
+        renderSingleSelectOptions(valueOptions, isSelectNative),
+      )}
     </rootProps.components.BaseSelect>
   );
 }
diff --git a/packages/grid/x-data-grid/src/components/cell/editCellUtils.ts b/packages/grid/x-data-grid/src/components/cell/editCellUtils.ts
new file mode 100644
index 0000000000000..9a8f59fae7910
--- /dev/null
+++ b/packages/grid/x-data-grid/src/components/cell/editCellUtils.ts
@@ -0,0 +1,17 @@
+export function getValueFromOption(option: any | undefined) {
+  if (typeof option === 'object' && option !== null) {
+    return option.value;
+  }
+  return option;
+}
+
+export function getValueFromValueOptions(value: string, valueOptions: any[]) {
+  if (valueOptions === undefined) {
+    return undefined;
+  }
+  const result = valueOptions.find((option) => {
+    const optionValue = getValueFromOption(option);
+    return String(optionValue) === String(value);
+  });
+  return getValueFromOption(result);
+}

From a4110ebbd37b54d002edea2319722232084a984b Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Thu, 7 Apr 2022 12:50:01 -0300
Subject: [PATCH 4/6] simplify which component to use for options

---
 .../cell/GridEditSingleSelectCell.tsx         | 25 +++-----------
 .../panel/filterPanel/GridFilterForm.tsx      | 34 ++++---------------
 .../filterPanel/GridFilterInputBoolean.tsx    | 33 +++++-------------
 .../GridFilterInputSingleSelect.tsx           | 27 +++------------
 .../filterPanel/GridFilterInputValue.tsx      | 27 +++------------
 5 files changed, 29 insertions(+), 117 deletions(-)

diff --git a/packages/grid/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx
index e3507c85faefa..a2b6c59a9759e 100644
--- a/packages/grid/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx
+++ b/packages/grid/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx
@@ -14,24 +14,7 @@ import { GridEvents } from '../../models/events/gridEvents';
 import { GridColDef, ValueOptions } from '../../models/colDef/gridColDef';
 import { getValueFromValueOptions } from './editCellUtils';
 
-interface SelectOptionProps {
-  isNative: boolean;
-  children: React.ReactNode;
-  value: any;
-}
-
-const SelectOption = ({ isNative, children, value, ...props }: SelectOptionProps) =>
-  isNative ? (
-    <option value={value} {...props}>
-      {children}
-    </option>
-  ) : (
-    <MenuItem value={value} {...props}>
-      {children}
-    </MenuItem>
-  );
-
-const renderSingleSelectOptions = (option: ValueOptions, isSelectNative: boolean) => {
+const renderSingleSelectOptions = (option: ValueOptions, OptionComponent: React.ElementType) => {
   const isOptionTypeObject = typeof option === 'object';
 
   const key = isOptionTypeObject ? option.value : option;
@@ -39,9 +22,9 @@ const renderSingleSelectOptions = (option: ValueOptions, isSelectNative: boolean
   const content = isOptionTypeObject ? option.label : option;
 
   return (
-    <SelectOption isNative={isSelectNative} key={key} value={value}>
+    <OptionComponent key={key} value={value}>
       {content}
-    </SelectOption>
+    </OptionComponent>
   );
 };
 
@@ -166,7 +149,7 @@ function GridEditSingleSelectCell(props: GridRenderEditCellParams & Omit<SelectP
       {...rootProps.componentsProps?.baseSelect}
     >
       {valueOptionsFormatted.map((valueOptions) =>
-        renderSingleSelectOptions(valueOptions, isSelectNative),
+        renderSingleSelectOptions(valueOptions, isSelectNative ? 'option' : MenuItem),
       )}
     </rootProps.components.BaseSelect>
   );
diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx
index 7e1dd4cf4f184..fb5e5d29d27dc 100644
--- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx
+++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx
@@ -103,23 +103,6 @@ const FilterFormValueInput = styled(FormControl, {
   overridesResolver: (_, styles) => styles.filterFormValueInput,
 })({ width: 190 });
 
-interface SelectOptionProps {
-  isNative: boolean;
-  children: React.ReactNode;
-  value: string;
-}
-
-const SelectOption = ({ isNative, children, value, ...props }: SelectOptionProps) =>
-  isNative ? (
-    <option value={value} {...props}>
-      {children}
-    </option>
-  ) : (
-    <MenuItem value={value} {...props}>
-      {children}
-    </MenuItem>
-  );
-
 const getLinkOperatorLocaleKey = (linkOperator: GridLinkOperator) => {
   switch (linkOperator) {
     case GridLinkOperator.And:
@@ -172,6 +155,7 @@ function GridFilterForm(props: GridFilterFormProps) {
 
   const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
   const isBaseSelectNative = baseSelectProps.native ?? true;
+  const OptionComponent = isBaseSelectNative ? 'option' : MenuItem;
 
   const sortedFilterableColumns = React.useMemo(() => {
     switch (columnsSort) {
@@ -339,13 +323,9 @@ function GridFilterForm(props: GridFilterFormProps) {
           {...rootProps.componentsProps?.baseSelect}
         >
           {linkOperators.map((linkOperator) => (
-            <SelectOption
-              isNative={isBaseSelectNative}
-              key={linkOperator.toString()}
-              value={linkOperator.toString()}
-            >
+            <OptionComponent key={linkOperator.toString()} value={linkOperator.toString()}>
               {apiRef.current.getLocaleText(getLinkOperatorLocaleKey(linkOperator))}
-            </SelectOption>
+            </OptionComponent>
           ))}
         </rootProps.components.BaseSelect>
       </FilterFormLinkOperatorInput>
@@ -373,9 +353,9 @@ function GridFilterForm(props: GridFilterFormProps) {
           {...rootProps.componentsProps?.baseSelect}
         >
           {sortedFilterableColumns.map((col) => (
-            <SelectOption isNative={isBaseSelectNative} key={col.field} value={col.field}>
+            <OptionComponent key={col.field} value={col.field}>
               {getColumnLabel(col)}
-            </SelectOption>
+            </OptionComponent>
           ))}
         </rootProps.components.BaseSelect>
       </FilterFormColumnInput>
@@ -404,12 +384,12 @@ function GridFilterForm(props: GridFilterFormProps) {
           {...rootProps.componentsProps?.baseSelect}
         >
           {currentColumn?.filterOperators?.map((operator) => (
-            <SelectOption isNative={isBaseSelectNative} key={operator.value} value={operator.value}>
+            <OptionComponent key={operator.value} value={operator.value}>
               {operator.label ||
                 apiRef.current.getLocaleText(
                   `filterOperator${capitalize(operator.value)}` as GridTranslationKeys,
                 )}
-            </SelectOption>
+            </OptionComponent>
           ))}
         </rootProps.components.BaseSelect>
       </FilterFormOperatorInput>
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 c2a9f96add9e5..453f90aa78079 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
@@ -1,26 +1,9 @@
 import * as React from 'react';
 import { TextFieldProps } from '@mui/material/TextField';
-import { MenuItem } from '@mui/material';
+import MenuItem from '@mui/material/MenuItem';
 import { GridFilterInputValueProps } from './GridFilterInputValueProps';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 
-interface SelectOptionProps {
-  isNative: boolean;
-  children: React.ReactNode;
-  value: string;
-}
-
-const SelectOption = ({ isNative, children, value, ...props }: SelectOptionProps) =>
-  isNative ? (
-    <option value={value} {...props}>
-      {children}
-    </option>
-  ) : (
-    <MenuItem value={value} {...props}>
-      {children}
-    </MenuItem>
-  );
-
 export function GridFilterInputBoolean(props: GridFilterInputValueProps & TextFieldProps) {
   const { item, applyValue, apiRef, focusElementRef, ...others } = props;
   const [filterValueState, setFilterValueState] = React.useState(item.value || '');
@@ -28,6 +11,7 @@ export function GridFilterInputBoolean(props: GridFilterInputValueProps & TextFi
 
   const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
   const isSelectNative = baseSelectProps.native ?? true;
+  const OptionComponent = isSelectNative ? 'option' : MenuItem;
 
   const onFilterChange = React.useCallback(
     (event) => {
@@ -41,6 +25,7 @@ export function GridFilterInputBoolean(props: GridFilterInputValueProps & TextFi
   React.useEffect(() => {
     setFilterValueState(item.value || '');
   }, [item.value]);
+
   return (
     <rootProps.components.BaseTextField
       label={apiRef.current.getLocaleText('filterPanelInputLabel')}
@@ -60,15 +45,13 @@ export function GridFilterInputBoolean(props: GridFilterInputValueProps & TextFi
       {...others}
       {...rootProps.componentsProps?.baseTextField}
     >
-      <SelectOption isNative={isSelectNative} value="">
-        {apiRef.current.getLocaleText('filterValueAny')}
-      </SelectOption>
-      <SelectOption isNative={isSelectNative} value="true">
+      <OptionComponent value="">{apiRef.current.getLocaleText('filterValueAny')}</OptionComponent>
+      <OptionComponent value="true">
         {apiRef.current.getLocaleText('filterValueTrue')}
-      </SelectOption>
-      <SelectOption isNative={isSelectNative} value="false">
+      </OptionComponent>
+      <OptionComponent value="false">
         {apiRef.current.getLocaleText('filterValueFalse')}
-      </SelectOption>
+      </OptionComponent>
     </rootProps.components.BaseTextField>
   );
 }
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 c7b339331b513..2bb2a55b5aaaa 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
@@ -2,34 +2,17 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { TextFieldProps } from '@mui/material/TextField';
 import { unstable_useId as useId } from '@mui/material/utils';
-import { MenuItem } from '@mui/material';
+import MenuItem from '@mui/material/MenuItem';
 import { GridFilterInputValueProps } from './GridFilterInputValueProps';
 import { GridColDef } from '../../../models/colDef/gridColDef';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { getValueFromValueOptions } from './filterPanelUtils';
 
-interface SelectOptionProps {
-  isNative: boolean;
-  children: React.ReactNode;
-  value: any;
-}
-
-const SelectOption = ({ isNative, children, value, ...props }: SelectOptionProps) =>
-  isNative ? (
-    <option value={value} {...props}>
-      {children}
-    </option>
-  ) : (
-    <MenuItem value={value} {...props}>
-      {children}
-    </MenuItem>
-  );
-
 const renderSingleSelectOptions = (
   { valueOptions, valueFormatter, field }: GridColDef,
   api: GridApiCommunity,
-  isSelectNative: boolean,
+  OptionComponent: React.ElementType,
 ) => {
   const iterableColumnValues =
     typeof valueOptions === 'function'
@@ -47,9 +30,9 @@ const renderSingleSelectOptions = (
     const content = isOptionTypeObject ? option.label : formattedValue;
 
     return (
-      <SelectOption isNative={isSelectNative} key={key} value={value}>
+      <OptionComponent key={key} value={value}>
         {content}
-      </SelectOption>
+      </OptionComponent>
     );
   });
 };
@@ -130,7 +113,7 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
       {renderSingleSelectOptions(
         apiRef.current.getColumn(item.columnField),
         apiRef.current,
-        isSelectNative,
+        isSelectNative ? 'option' : MenuItem,
       )}
     </rootProps.components.BaseTextField>
   );
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 5eab7ed31e7c4..bb412d54c5c6f 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
@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { TextFieldProps } from '@mui/material/TextField';
 import { unstable_useId as useId } from '@mui/material/utils';
-import { MenuItem } from '@mui/material';
+import MenuItem from '@mui/material/MenuItem';
 import { GridLoadIcon } from '../../icons';
 import { GridFilterInputValueProps } from './GridFilterInputValueProps';
 import { GridColDef } from '../../../models/colDef/gridColDef';
@@ -22,27 +22,10 @@ function warnDeprecatedTypeSupport(type: string) {
   warnedOnce[type] = true;
 }
 
-interface SelectOptionProps {
-  isNative: boolean;
-  children: React.ReactNode;
-  value: any;
-}
-
-const SelectOption = ({ isNative, children, value, ...props }: SelectOptionProps) =>
-  isNative ? (
-    <option value={value} {...props}>
-      {children}
-    </option>
-  ) : (
-    <MenuItem value={value} {...props}>
-      {children}
-    </MenuItem>
-  );
-
 const renderSingleSelectOptions = (
   { valueOptions, valueFormatter, field }: GridColDef,
   api: GridApiCommunity,
-  isSelectNative: boolean,
+  OptionComponent: React.ElementType,
 ) => {
   const iterableColumnValues =
     typeof valueOptions === 'function'
@@ -60,9 +43,9 @@ const renderSingleSelectOptions = (
     const content = isOptionTypeObject ? option.label : formattedValue;
 
     return (
-      <SelectOption isNative={isSelectNative} key={key} value={value}>
+      <OptionComponent key={key} value={value}>
         {content}
-      </SelectOption>
+      </OptionComponent>
     );
   });
 };
@@ -101,7 +84,7 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps & TextFieldPr
           children: renderSingleSelectOptions(
             apiRef.current.getColumn(item.columnField),
             apiRef.current,
-            isSelectNative,
+            isSelectNative ? 'option' : MenuItem,
           ),
         }
       : {};

From 1e5d9c325479e0411144ba8827b24c4481f4fab0 Mon Sep 17 00:00:00 2001
From: Alexandre Fauquette <alex.fauquette@gmail.com>
Date: Fri, 8 Apr 2022 09:42:09 +0200
Subject: [PATCH 5/6] replace editCellUtils by filterPanelUtils

---
 .../cell/GridEditSingleSelectCell.tsx           |  2 +-
 .../src/components/cell/editCellUtils.ts        | 17 -----------------
 2 files changed, 1 insertion(+), 18 deletions(-)
 delete mode 100644 packages/grid/x-data-grid/src/components/cell/editCellUtils.ts

diff --git a/packages/grid/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx
index a2b6c59a9759e..4c7a9b7c7322d 100644
--- a/packages/grid/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx
+++ b/packages/grid/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx
@@ -12,7 +12,7 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridEditModes } from '../../models/gridEditRowModel';
 import { GridEvents } from '../../models/events/gridEvents';
 import { GridColDef, ValueOptions } from '../../models/colDef/gridColDef';
-import { getValueFromValueOptions } from './editCellUtils';
+import { getValueFromValueOptions } from '../panel/filterPanel/filterPanelUtils';
 
 const renderSingleSelectOptions = (option: ValueOptions, OptionComponent: React.ElementType) => {
   const isOptionTypeObject = typeof option === 'object';
diff --git a/packages/grid/x-data-grid/src/components/cell/editCellUtils.ts b/packages/grid/x-data-grid/src/components/cell/editCellUtils.ts
deleted file mode 100644
index 9a8f59fae7910..0000000000000
--- a/packages/grid/x-data-grid/src/components/cell/editCellUtils.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export function getValueFromOption(option: any | undefined) {
-  if (typeof option === 'object' && option !== null) {
-    return option.value;
-  }
-  return option;
-}
-
-export function getValueFromValueOptions(value: string, valueOptions: any[]) {
-  if (valueOptions === undefined) {
-    return undefined;
-  }
-  const result = valueOptions.find((option) => {
-    const optionValue = getValueFromOption(option);
-    return String(optionValue) === String(value);
-  });
-  return getValueFromOption(result);
-}

From 3be4afd5589253094d7566da0ef39d8961e5dac9 Mon Sep 17 00:00:00 2001
From: KyeongSoo Kim <shakramon@naver.com>
Date: Fri, 8 Apr 2022 17:04:49 +0900
Subject: [PATCH 6/6] add missing prop

Co-authored-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
---
 .../src/components/panel/filterPanel/GridFilterInputValue.tsx    | 1 +
 1 file changed, 1 insertion(+)

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 bb412d54c5c6f..97843d2f94dde 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
@@ -79,6 +79,7 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps & TextFieldPr
       ? {
           select: true,
           SelectProps: {
+            native: isSelectNative,
             ...rootProps.componentsProps?.baseSelect,
           },
           children: renderSingleSelectOptions(