[DataGrid] Enable using MUI Select Component

mui · Apr 5, 2022 · 632457b · 632457b
1 parent b4c16bd
commit 632457b
Show file tree

Hide file tree

Showing 6 changed files with 140 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,
           ),
         }
       : {};