[DataGrid] Fix date/dateTime edit input font size to match view m…

…ode (#5304)
mui · Jul 20, 2022 · 29a1f55 · 29a1f55
1 parent f260e44
commit 29a1f55
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 59 deletions.
diff --git a/docs/data/data-grid/editing/EditingWithDatePickers.js b/docs/data/data-grid/editing/EditingWithDatePickers.js
@@ -19,6 +19,7 @@ import {
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import TextField from '@mui/material/TextField';
 import locale from 'date-fns/locale/en-US';
+import { styled } from '@mui/material/styles';
 
 function buildApplyDateFilterFn(filterItem, compareFn, showTime = false) {
   if (!filterItem.value) {
@@ -166,23 +167,35 @@ const dateColumnType = {
   },
 };
 
-function GridEditDateCell({ id, field, value }) {
+const GridEditDateTextField = styled(TextField)({
+  '& .MuiInputBase-root': {
+    fontSize: 'inherit',
+  },
+});
+
+function GridEditDateCell({ id, field, value, colDef }) {
   const apiRef = useGridApiContext();
 
+  const Component = colDef.type === 'dateTime' ? DateTimePicker : DatePicker;
+
   const handleChange = (newValue) => {
     apiRef.current.setEditCellValue({ id, field, value: newValue });
   };
 
   return (
-    <DatePicker
+    <Component
       value={value}
-      renderInput={(params) => <TextField {...params} />}
+      renderInput={(params) => <GridEditDateTextField fullWidth {...params} />}
       onChange={handleChange}
     />
   );
 }
 
 GridEditDateCell.propTypes = {
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
   /**
    * The column field of the cell that triggered the event.
    */
@@ -265,7 +278,7 @@ const dateTimeColumnType = {
   ...GRID_DATETIME_COL_DEF,
   resizable: false,
   renderEditCell: (params) => {
-    return <GridEditDateTimeCell {...params} />;
+    return <GridEditDateCell {...params} />;
   },
   filterOperators: getDateFilterOperators(true),
   valueFormatter: (params) => {
@@ -279,37 +292,6 @@ const dateTimeColumnType = {
   },
 };
 
-function GridEditDateTimeCell({ id, field, value }) {
-  const apiRef = useGridApiContext();
-
-  const handleChange = (newValue) => {
-    apiRef.current.setEditCellValue({ id, field, value: newValue });
-  };
-
-  return (
-    <DateTimePicker
-      value={value}
-      renderInput={(params) => <TextField {...params} />}
-      onChange={handleChange}
-    />
-  );
-}
-
-GridEditDateTimeCell.propTypes = {
-  /**
-   * The column field of the cell that triggered the event.
-   */
-  field: PropTypes.string.isRequired,
-  /**
-   * The grid row id.
-   */
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  /**
-   * The cell value, but if the column has valueGetter, use getValue.
-   */
-  value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
-};
-
 const columns = [
   { field: 'name', headerName: 'Name', width: 180, editable: true },
   { field: 'age', headerName: 'Age', type: 'number', editable: true },

diff --git a/docs/data/data-grid/editing/EditingWithDatePickers.tsx b/docs/data/data-grid/editing/EditingWithDatePickers.tsx
@@ -25,6 +25,7 @@ import {
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import TextField from '@mui/material/TextField';
 import locale from 'date-fns/locale/en-US';
+import { styled } from '@mui/material/styles';
 
 function buildApplyDateFilterFn(
   filterItem: GridFilterItem,
@@ -177,21 +178,30 @@ const dateColumnType: GridColTypeDef<Date | string, string> = {
   },
 };
 
+const GridEditDateTextField = styled(TextField)({
+  '& .MuiInputBase-root': {
+    fontSize: 'inherit',
+  },
+});
+
 function GridEditDateCell({
   id,
   field,
   value,
+  colDef,
 }: GridRenderEditCellParams<Date | string | null>) {
   const apiRef = useGridApiContext();
 
+  const Component = colDef.type === 'dateTime' ? DateTimePicker : DatePicker;
+
   const handleChange = (newValue: unknown) => {
     apiRef.current.setEditCellValue({ id, field, value: newValue });
   };
 
   return (
-    <DatePicker
+    <Component
       value={value}
-      renderInput={(params) => <TextField {...params} />}
+      renderInput={(params) => <GridEditDateTextField fullWidth {...params} />}
       onChange={handleChange}
     />
   );
@@ -238,7 +248,7 @@ const dateTimeColumnType: GridColTypeDef<Date | string, string> = {
   ...GRID_DATETIME_COL_DEF,
   resizable: false,
   renderEditCell: (params) => {
-    return <GridEditDateTimeCell {...params} />;
+    return <GridEditDateCell {...params} />;
   },
   filterOperators: getDateFilterOperators(true),
   valueFormatter: (params) => {
@@ -252,26 +262,6 @@ const dateTimeColumnType: GridColTypeDef<Date | string, string> = {
   },
 };
 
-function GridEditDateTimeCell({
-  id,
-  field,
-  value,
-}: GridRenderEditCellParams<Date | string | null>) {
-  const apiRef = useGridApiContext();
-
-  const handleChange = (newValue: unknown) => {
-    apiRef.current.setEditCellValue({ id, field, value: newValue });
-  };
-
-  return (
-    <DateTimePicker
-      value={value}
-      renderInput={(params) => <TextField {...params} />}
-      onChange={handleChange}
-    />
-  );
-}
-
 const columns: GridColumns = [
   { field: 'name', headerName: 'Name', width: 180, editable: true },
   { field: 'age', headerName: 'Age', type: 'number', editable: true },

diff --git a/packages/grid/x-data-grid/src/components/cell/GridEditDateCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridEditDateCell.tsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
 import InputBase, { InputBaseProps } from '@mui/material/InputBase';
+import { styled } from '@mui/material/styles';
 import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -11,6 +12,10 @@ import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 
 type OwnerState = { classes: DataGridProcessedProps['classes'] };
 
+const StyledInputBase = styled(InputBase)({
+  fontSize: 'inherit',
+});
+
 const useUtilityClasses = (ownerState: OwnerState) => {
   const { classes } = ownerState;
 
@@ -140,7 +145,7 @@ function GridEditDateCell(props: GridEditDateCellProps) {
   }, [hasFocus]);
 
   return (
-    <InputBase
+    <StyledInputBase
       inputRef={inputRef}
       fullWidth
       className={classes.root}