[DataGrid] Fix DatePicker bug by limiting years to 4 digits

[alexfauquette]

Fix #3221

HTML input allows to set more than 4 digits in a year but it seems to be a problem when setting the value so I propose to fix the maximal year to 9999. Probably need to change it around year 8000 ;)

It would probably be possible to avoid the bug without limiting years to 4 digits because filters can accept such dates. But I do not see any value for that and would take more time to find where does the bug comes from.

demo: https://deploy-preview-3222--material-ui-x.netlify.app/components/data-grid/demo/

[sebastianfrey]

I have noticed, that it is also possible in the input component for filtering date fields to set more then 4 digits in a year.

[alexfauquette]

I've noticed it too, but it does not make the input component buggy. Do you feel it is a bug to be able to set years with 5 digits?

[sebastianfrey]

@alexfauquette Indeed, it does not make the input component buggy. But I think it does not feel natural and intuitive, when users can enter 5+ digits for the year.

From my perspective it feels like a bug, because in my use case I have to adopt multiple server backends using the grid component. Each of those server backends handles dates differently. That means, some of them may not fail when querying a date field with a date with more than 4 year digits, and some of them will fail. And so I would have to handle the date validation for each of those backends outside of the grid filter component, which is not ideal.

[flaviendelangle]

We have edge cases where dates with 5 digits can make sense (if I want the starting year of my favorite SF cycles for instance 😄 )
But I suppose people can always create custom date-custom col types with a renderer calling GridEditDateCell with additional props.

[m4theushw]

For consistency I'm in favor of also not allowing 5-digit years in the filter value. With #3227, it will be easier to add the max prop.

[sebastianfrey]

@flaviendelangle In my opinion the special case is 5 or more digits per year. So if someone has such a requirement, than he/she should create a custom date component. But it's up to you guys, what direction this is going.

[flaviendelangle]

For consistency I'm in favor of also not allowing 5-digit years in the filter value. With #3227, it will be easier to add the max prop.

Should it be done on this PR ?

[alexfauquette]

@flaviendelangle Il will merge #3227 and do the max digits in this one

[alexfauquette]

@flaviendelangle My bad, I did it in the other PR. So filter limitation is already on master. But I did it wrong. I did not notice the distinction between InputProps and inputProps. That's corrected in last commit

https://github.com/mui-org/material-ui-x/blob/1a4324cbc24723b768ef0544a72b09b272094c16/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx#L50

[m4theushw]

The filter input is based on the TextField so users expect that the props will be forwarded to the root component.

Here you're spreading the top-level inputProps inside InputProps. It's like:

<GridFilterInputDate inputProps={{ min: '...' }} />
-> <TextField InputProps={{ inputProps: { min: '...' } }} /> (this PR)
-> <TextField inputProps={{ min: '...' }} /> (how it should behave)

[alexfauquette]

I totally agree, but Eslint do not agree with us and complains about duplicate props.
I made some research to find other solutions, but it seems core team recommends it mui/material-ui#10064 (comment)

[m4theushw]

The top-level inputProps is still being applied inside InputProps. The following diff should fix this

diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx
index 7e061a7ec..e8b4f1006 100644
--- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx
+++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx
@@ -11,7 +11,7 @@ export type GridFilterInputDateProps = GridFilterInputValueProps &
 export const SUBMIT_FILTER_DATE_STROKE_TIME = 500;
 
 function GridFilterInputDate(props: GridFilterInputDateProps) {
-  const { item, applyValue, type, apiRef, focusElementRef, inputProps, InputProps, ...other } =
+  const { item, applyValue, type, apiRef, focusElementRef, InputProps, ...other } =
     props;
 
   const filterTimeout = React.useRef<any>();
@@ -61,11 +61,11 @@ function GridFilterInputDate(props: GridFilterInputDateProps) {
       inputRef={focusElementRef}
       InputProps={{
         ...(applying ? { endAdornment: <GridLoadIcon /> } : {}),
+        ...InputProps,
         inputProps: {
           max: type === 'datetime-local' ? '9999-12-31T23:59' : '9999-12-31',
-          ...inputProps,
+          ...InputProps?.inputProps,
         },
-        ...InputProps,
       }}
       {...other}
     />