Merge

mui · Apr 11, 2024 · 90774f0 · 90774f0
2 parents 481da5a + a84c0d9
commit 90774f0
Show file tree

Hide file tree

Showing 5 changed files with 180 additions and 265 deletions.
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx b/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);
       });
     },

diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.test.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.test.tsx
@@ -1,60 +1,24 @@
-import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, ErrorBoundary } from '@mui-internal/test-utils';
-import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
-import { TreeItem } from '@mui/x-tree-view/TreeItem';
+import { describeTreeView } from 'test/utils/tree-view/describeTreeView';
 
-describe('useTreeViewItems', () => {
-  const { render } = createRenderer();
-
-  it('should throw an error when two items have the same ID (items prop approach)', function test() {
-    // TODO is this fixed?
-    if (!/jsdom/.test(window.navigator.userAgent)) {
-      // can't catch render errors in the browser for unknown reason
-      // tried try-catch + error boundary + window onError preventDefault
-      this.skip();
-    }
-
-    expect(() =>
-      render(
-        <ErrorBoundary>
-          <RichTreeView
-            items={[
-              { id: '1', label: '1' },
-              { id: '1', label: 'B' },
-            ]}
-          />
-        </ErrorBoundary>,
-      ),
-    ).toErrorDev([
-      'MUI X: The Tree View component requires all items to have a unique `id` property.',
-      'MUI X: The Tree View component requires all items to have a unique `id` property.',
-      'The above error occurred in the <ForwardRef(RichTreeView)> component:',
-    ]);
-  });
-
-  it('should throw an error when two items have the same ID (JSX approach)', function test() {
+describeTreeView('useTreeViewItems plugin', ({ render, treeViewComponent }) => {
+  it('should throw an error when two items have the same ID', function test() {
     // TODO is this fixed?
     if (!/jsdom/.test(window.navigator.userAgent)) {
       // can't catch render errors in the browser for unknown reason
       // tried try-catch + error boundary + window onError preventDefault
       this.skip();
     }
 
-    expect(() =>
-      render(
-        <ErrorBoundary>
-          <SimpleTreeView>
-            <TreeItem itemId="1" label="A" />
-            <TreeItem itemId="1" label="B" />
-          </SimpleTreeView>
-        </ErrorBoundary>,
-      ),
-    ).toErrorDev([
-      'MUI X: The Tree View component requires all items to have a unique `id` property.',
-      'MUI X: The Tree View component requires all items to have a unique `id` property.',
-      'The above error occurred in the <ForwardRef(SimpleTreeView)> component:',
-    ]);
+    expect(() => render({ items: [{ id: '1' }, { id: '1' }], withErrorBoundary: true })).toErrorDev(
+      [
+        ...(treeViewComponent === 'SimpleTreeView'
+          ? ['Encountered two children with the same key']
+          : []),
+        'MUI X: The Tree View component requires all items to have a unique `id` property.',
+        'MUI X: The Tree View component requires all items to have a unique `id` property.',
+        `The above error occurred in the <ForwardRef(${treeViewComponent})> component`,
+      ],
+    );
   });
 });
diff --git a/test/e2e/index.test.ts b/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 />', () => {