[DataGrid] Fix invalid date error when filtering date/dateTime co…

…lumns (#12709)

packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx

@@ -26,6 +26,9 @@ function convertFilterItemValueToInputValue(
     return '';
   }
   const dateCopy = new Date(itemValue);
+  if (Number.isNaN(dateCopy.getTime())) {
+    return '';
+  }
   // The date picker expects the date to be in the local timezone.
   // But .toISOString() converts it to UTC with zero offset.
   // So we need to subtract the timezone offset.
@@ -69,7 +72,8 @@ function GridFilterInputDate(props: GridFilterInputDateProps) {
 
       setIsApplying(true);
       filterTimeout.start(rootProps.filterDebounceMs, () => {
-        applyValue({ ...item, value: new Date(value) });
+        const date = new Date(value);
+        applyValue({ ...item, value: Number.isNaN(date.getTime()) ? undefined : date });
         setIsApplying(false);
       });
     },

test/e2e/index.test.ts

@@ -10,6 +10,7 @@ import {
   devices,
   BrowserContextOptions,
   BrowserType,
+  WebError,
 } from '@playwright/test';
 import { pickersTextFieldClasses } from '@mui/x-date-pickers/PickersTextField';
 import { pickersSectionListClasses } from '@mui/x-date-pickers/PickersSectionList';
@@ -514,6 +515,29 @@ async function initializeEnvironment(
           await page.locator('[role="gridcell"][data-field="brand"] input').inputValue(),
         ).not.to.equal('v');
       });
+
+      // https://github.com/mui/mui-x/issues/12705
+      it('should not crash if the date is invalid', async () => {
+        await renderFixture('DataGrid/KeyboardEditDate');
+
+        await page.hover('div[role="columnheader"][data-field="birthday"]');
+        await page.click(
+          'div[role="columnheader"][data-field="birthday"] button[aria-label="Menu"]',
+        );
+        await page.click('"Filter"');
+        await page.keyboard.type('08/04/2024', { delay: 10 });
+
+        let thrownError: Error | null = null;
+        context.once('weberror', (webError: WebError) => {
+          thrownError = webError.error();
+          console.error(thrownError);
+        });
+
+        await page.keyboard.press('Backspace');
+
+        await sleep(200);
+        expect(thrownError).to.equal(null);
+      });
     });
 
     describe('<DatePicker />', () => {