[data grid] Date is resetting on manual input while filtering

[rajeshreddy-bheemireddy]

The problem in depth

While filtering when I am trying to input some manual date into the date field the date is getting reset. Particularly when I start typing year, here is the Link to play around. Please select the Created On column and is operator for filtering and start manually typing the date. When you reach Year the cursor will be reset back to MM without letting you type the year fully.
If this is a bug, please provide some workaround for this.

Your environment

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
     Using Chrome browser.
  Output from `npx @mui/envinfo` goes here.
System:
  OS: macOS 13.3.1
Binaries:
  Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
  npm: 10.5.2 - ~/.nvm/versions/node/v20.12.2/bin/npm
  pnpm: Not Found
Browsers:
  Chrome: 124.0.6367.208
  Edge: 124.0.2478.105
  Safari: 16.4
npmPackages:
  @emotion/react: ^11.9.0 => 11.11.4 
  @emotion/styled: ^11.8.1 => 11.11.5 
  @mui/base:  5.0.0-beta.40 
  @mui/core-downloads-tracker:  5.15.15 
  @mui/icons-material: ^5.8.0 => 5.15.15 
  @mui/lab: ^5.0.0-alpha.83 => 5.0.0-alpha.170 
  @mui/material: ^5.10.17 => 5.15.15 
  @mui/private-theming:  5.15.14 
  @mui/styled-engine:  5.15.14 
  @mui/styles:  5.11.1 
  @mui/system:  5.15.15 
  @mui/types:  7.2.14 
  @mui/utils:  5.15.14 
  @mui/x-data-grid:  6.19.11 
  @mui/x-data-grid-premium: ^6.16.2 => 6.19.11 
  @mui/x-data-grid-pro: ^6.3.0 => 6.19.11 
  @mui/x-license-pro: ^6.0.4 => 6.10.2 
  @types/react: ^17.0.0 => 17.0.80 
  react: ^17.0.2 => 17.0.2 
  react-dom: ^17.0.2 => 17.0.2 
  styled-components: ^5.3.0 => 5.3.11 
  typescript: ^3.9.3 => 3.9.10 

Search keywords: Date, Date PIcker, filtering, datagrid filtering, manual date
Order ID: 75705

[michelengelen]

Hey @rajeshreddy-bheemireddy
You have to extract the component from the slots definition into a standalone component. Defining it as a function literal will rerender it on every change to the state.

const CustomFilterPanel = (props) => (
  <Box>
    <GridFilterPanel />
  </Box>
); 

...

<DataGrid
  {...data}
  filterModel={filterModel}
  onFilterModelChange={(newFilterModel) => setFilterModel(newFilterModel)}
  slots={{
    filterPanel: CustomFilterPanel,
    toolbar: GridToolbar,
  }}
/>

Here is the updated DEMO.

---

FYI: you defined slots twice in the original demo.

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.