From f6e6eeee4372dd576cde277ad1acd726d5eb2f40 Mon Sep 17 00:00:00 2001 From: Rajat Date: Sat, 21 Dec 2024 19:47:54 +0530 Subject: [PATCH 1/7] handle Focus and use new accessible DOM structure in demo --- .../custom-columns/EditingWithDatePickers.js | 42 +++++++++++------- .../custom-columns/EditingWithDatePickers.tsx | 44 +++++++++++-------- 2 files changed, 52 insertions(+), 34 deletions(-) diff --git a/docs/data/data-grid/custom-columns/EditingWithDatePickers.js b/docs/data/data-grid/custom-columns/EditingWithDatePickers.js index 3418d179a1c70..b84f4bcc07299 100644 --- a/docs/data/data-grid/custom-columns/EditingWithDatePickers.js +++ b/docs/data/data-grid/custom-columns/EditingWithDatePickers.js @@ -15,9 +15,9 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { DatePicker } from '@mui/x-date-pickers/DatePicker'; import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'; -import InputBase from '@mui/material/InputBase'; import { enUS as locale } from 'date-fns/locale'; -import { styled } from '@mui/material/styles'; +import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils'; +import { pickersInputBaseClasses } from '@mui/x-date-pickers/PickersTextField'; const dateAdapter = new AdapterDateFns({ locale }); @@ -44,31 +44,41 @@ const dateColumnType = { }, }; -const GridEditDateInput = styled(InputBase)({ - fontSize: 'inherit', - padding: '0 9px', -}); - -function WrappedGridEditDateInput(props) { - const { InputProps, focused, ...other } = props; - return ; -} - -function GridEditDateCell({ id, field, value, colDef }) { +function GridEditDateCell({ id, field, value, colDef, hasFocus }) { const apiRef = useGridApiContext(); - + const inputRef = React.useRef(); const Component = colDef.type === 'dateTime' ? DateTimePicker : DatePicker; const handleChange = (newValue) => { apiRef.current.setEditCellValue({ id, field, value: newValue }); }; - + useEnhancedEffect(() => { + if (hasFocus) { + inputRef.current.focus(); + } + }, [hasFocus]); return ( ); } diff --git a/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx b/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx index a381b48b922bd..829dc0cf36ef3 100644 --- a/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx +++ b/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx @@ -20,10 +20,9 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { DatePicker } from '@mui/x-date-pickers/DatePicker'; import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'; -import InputBase, { InputBaseProps } from '@mui/material/InputBase'; import { enUS as locale } from 'date-fns/locale'; -import { styled } from '@mui/material/styles'; -import { TextFieldProps } from '@mui/material/TextField'; +import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils'; +import { pickersInputBaseClasses } from '@mui/x-date-pickers/PickersTextField'; const dateAdapter = new AdapterDateFns({ locale }); @@ -50,38 +49,47 @@ const dateColumnType: GridColTypeDef = { }, }; -const GridEditDateInput = styled(InputBase)({ - fontSize: 'inherit', - padding: '0 9px', -}); - -function WrappedGridEditDateInput(props: TextFieldProps) { - const { InputProps, focused, ...other } = props; - return ( - - ); -} - function GridEditDateCell({ id, field, value, colDef, + hasFocus, }: GridRenderEditCellParams) { const apiRef = useGridApiContext(); - + const inputRef = React.useRef(); const Component = colDef.type === 'dateTime' ? DateTimePicker : DatePicker; const handleChange = (newValue: unknown) => { apiRef.current.setEditCellValue({ id, field, value: newValue }); }; - + useEnhancedEffect(() => { + if (hasFocus) { + inputRef.current!.focus(); + } + }, [hasFocus]); return ( ); } From ae2cf69d1b9887706c907dc58f1c9cc1fe912277 Mon Sep 17 00:00:00 2001 From: Rajat Date: Sat, 21 Dec 2024 19:58:12 +0530 Subject: [PATCH 2/7] prettier changes --- .../data-grid/custom-columns/EditingWithDatePickers.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx b/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx index 829dc0cf36ef3..c5e1a57b4ff96 100644 --- a/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx +++ b/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx @@ -78,15 +78,15 @@ function GridEditDateCell({ inputRef, variant: 'standard', fullWidth: true, - inputProps:{ - "aria-hidden":false, + inputProps: { + 'aria-hidden': false, }, sx: { [`& .${pickersInputBaseClasses.root}`]: { fontSize: 'inherit', padding: '0px 9px', - marginTop:'10px' - } + marginTop: '10px', + }, }, }, }} From efc71c09325666d753b320101066043075522367 Mon Sep 17 00:00:00 2001 From: Rajat Date: Sat, 21 Dec 2024 20:13:07 +0530 Subject: [PATCH 3/7] fix --- .../custom-columns/EditingWithDatePickers.js | 36 +++++++++--------- .../custom-columns/EditingWithDatePickers.tsx | 38 ++++++++++--------- 2 files changed, 38 insertions(+), 36 deletions(-) diff --git a/docs/data/data-grid/custom-columns/EditingWithDatePickers.js b/docs/data/data-grid/custom-columns/EditingWithDatePickers.js index b84f4bcc07299..e4e4dc37789d6 100644 --- a/docs/data/data-grid/custom-columns/EditingWithDatePickers.js +++ b/docs/data/data-grid/custom-columns/EditingWithDatePickers.js @@ -15,9 +15,11 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { DatePicker } from '@mui/x-date-pickers/DatePicker'; import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'; +import InputBase from '@mui/material/InputBase'; import { enUS as locale } from 'date-fns/locale'; +import { styled } from '@mui/material/styles'; + import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils'; -import { pickersInputBaseClasses } from '@mui/x-date-pickers/PickersTextField'; const dateAdapter = new AdapterDateFns({ locale }); @@ -44,6 +46,16 @@ const dateColumnType = { }, }; +const GridEditDateInput = styled(InputBase)({ + fontSize: 'inherit', + padding: '0 9px', +}); + +function WrappedGridEditDateInput(props) { + const { InputProps, focused, ...other } = props; + return ; +} + function GridEditDateCell({ id, field, value, colDef, hasFocus }) { const apiRef = useGridApiContext(); const inputRef = React.useRef(); @@ -52,33 +64,21 @@ function GridEditDateCell({ id, field, value, colDef, hasFocus }) { const handleChange = (newValue) => { apiRef.current.setEditCellValue({ id, field, value: newValue }); }; + useEnhancedEffect(() => { if (hasFocus) { inputRef.current.focus(); } }, [hasFocus]); + return ( ); } diff --git a/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx b/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx index c5e1a57b4ff96..5e081da33dfb0 100644 --- a/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx +++ b/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx @@ -20,9 +20,11 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { DatePicker } from '@mui/x-date-pickers/DatePicker'; import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'; +import InputBase, { InputBaseProps } from '@mui/material/InputBase'; import { enUS as locale } from 'date-fns/locale'; +import { styled } from '@mui/material/styles'; +import { TextFieldProps } from '@mui/material/TextField'; import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils'; -import { pickersInputBaseClasses } from '@mui/x-date-pickers/PickersTextField'; const dateAdapter = new AdapterDateFns({ locale }); @@ -49,6 +51,18 @@ const dateColumnType: GridColTypeDef = { }, }; +const GridEditDateInput = styled(InputBase)({ + fontSize: 'inherit', + padding: '0 9px', +}); + +function WrappedGridEditDateInput(props: TextFieldProps) { + const { InputProps, focused, ...other } = props; + return ( + + ); +} + function GridEditDateCell({ id, field, @@ -63,33 +77,21 @@ function GridEditDateCell({ const handleChange = (newValue: unknown) => { apiRef.current.setEditCellValue({ id, field, value: newValue }); }; + useEnhancedEffect(() => { if (hasFocus) { inputRef.current!.focus(); } }, [hasFocus]); + return ( ); } From 15de05fed6c2acc66c89c556dee0ea4faa143b06 Mon Sep 17 00:00:00 2001 From: Rajat Date: Tue, 31 Dec 2024 11:47:28 +0530 Subject: [PATCH 4/7] handle focus --- docs/data/data-grid/custom-columns/EditingWithDatePickers.js | 4 ++-- docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/data/data-grid/custom-columns/EditingWithDatePickers.js b/docs/data/data-grid/custom-columns/EditingWithDatePickers.js index ce9807ebc70bd..7e0f00aaafa54 100644 --- a/docs/data/data-grid/custom-columns/EditingWithDatePickers.js +++ b/docs/data/data-grid/custom-columns/EditingWithDatePickers.js @@ -17,7 +17,7 @@ import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'; import { enUS as locale } from 'date-fns/locale'; import format from 'date-fns/format'; - +import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils'; /** * `date` column */ @@ -41,7 +41,7 @@ const dateColumnType = { }, }; -function GridEditDateCell({ id, field, value, colDef }) { +function GridEditDateCell({ id, field, value, colDef, hasFocus }) { const apiRef = useGridApiContext(); const inputRef = React.useRef(); const Component = colDef.type === 'dateTime' ? DateTimePicker : DatePicker; diff --git a/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx b/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx index 5f25b02462b3c..229deba79f2a0 100644 --- a/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx +++ b/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx @@ -22,7 +22,7 @@ import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'; import { enUS as locale } from 'date-fns/locale'; import format from 'date-fns/format'; - +import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils'; /** * `date` column */ @@ -75,6 +75,7 @@ function GridEditDateCell({ onChange={handleChange} slotProps={{ textField: { + inputRef, variant: 'standard', fullWidth: true, sx: { From 430a68dda82e03a7a7fdd9ed3ca20a73c1737de0 Mon Sep 17 00:00:00 2001 From: Rajat Date: Tue, 31 Dec 2024 11:49:24 +0530 Subject: [PATCH 5/7] transpile demo --- docs/data/data-grid/custom-columns/EditingWithDatePickers.js | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/data/data-grid/custom-columns/EditingWithDatePickers.js b/docs/data/data-grid/custom-columns/EditingWithDatePickers.js index 7e0f00aaafa54..9b76e81b63b79 100644 --- a/docs/data/data-grid/custom-columns/EditingWithDatePickers.js +++ b/docs/data/data-grid/custom-columns/EditingWithDatePickers.js @@ -64,6 +64,7 @@ function GridEditDateCell({ id, field, value, colDef, hasFocus }) { onChange={handleChange} slotProps={{ textField: { + inputRef, variant: 'standard', fullWidth: true, sx: { From 77e599faa31c131fa881f5da73492c93b3e67829 Mon Sep 17 00:00:00 2001 From: Rajat Date: Tue, 31 Dec 2024 11:52:46 +0530 Subject: [PATCH 6/7] fix --- docs/data/data-grid/custom-columns/EditingWithDatePickers.js | 1 - docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/docs/data/data-grid/custom-columns/EditingWithDatePickers.js b/docs/data/data-grid/custom-columns/EditingWithDatePickers.js index 9b76e81b63b79..41f18c40d3db8 100644 --- a/docs/data/data-grid/custom-columns/EditingWithDatePickers.js +++ b/docs/data/data-grid/custom-columns/EditingWithDatePickers.js @@ -60,7 +60,6 @@ function GridEditDateCell({ id, field, value, colDef, hasFocus }) { Date: Tue, 31 Dec 2024 12:31:27 +0530 Subject: [PATCH 7/7] pass default value in ref --- docs/data/data-grid/custom-columns/EditingWithDatePickers.js | 2 +- docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/data-grid/custom-columns/EditingWithDatePickers.js b/docs/data/data-grid/custom-columns/EditingWithDatePickers.js index 41f18c40d3db8..8384fbb1d03d9 100644 --- a/docs/data/data-grid/custom-columns/EditingWithDatePickers.js +++ b/docs/data/data-grid/custom-columns/EditingWithDatePickers.js @@ -43,7 +43,7 @@ const dateColumnType = { function GridEditDateCell({ id, field, value, colDef, hasFocus }) { const apiRef = useGridApiContext(); - const inputRef = React.useRef(); + const inputRef = React.useRef(null); const Component = colDef.type === 'dateTime' ? DateTimePicker : DatePicker; const handleChange = (newValue) => { diff --git a/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx b/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx index 7d1149656ed94..ff26d3a5a238c 100644 --- a/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx +++ b/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx @@ -54,7 +54,7 @@ function GridEditDateCell({ hasFocus, }: GridRenderEditCellParams) { const apiRef = useGridApiContext(); - const inputRef = React.useRef(); + const inputRef = React.useRef(null); const Component = colDef.type === 'dateTime' ? DateTimePicker : DatePicker; const handleChange = (newValue: unknown) => {