[fields] Fix field editing after closing the picker (#12675)

mui · Apr 11, 2024 · aed8aeb · aed8aeb
1 parent 9f6f609
commit aed8aeb
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 12 deletions.
diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts
@@ -198,15 +198,15 @@ const useMultiInputFieldSlotProps = <
     event.stopPropagation();
     onRangePositionChange('start');
     if (!readOnly && !disableOpenPicker) {
-      actions.onOpen();
+      actions.onOpen(event);
     }
   };
 
   const openRangeEndSelection: React.UIEventHandler = (event) => {
     event.stopPropagation();
     onRangePositionChange('end');
     if (!readOnly && !disableOpenPicker) {
-      actions.onOpen();
+      actions.onOpen(event);
     }
   };
 
@@ -400,7 +400,7 @@ const useSingleInputFieldSlotProps = <
     event.stopPropagation();
 
     if (!readOnly && !disableOpenPicker) {
-      actions.onOpen();
+      actions.onOpen(event);
     }
   };
 

diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts
@@ -357,9 +357,15 @@ export const usePickerValue = <
     });
   });
 
-  const handleOpen = useEventCallback(() => setIsOpen(true));
+  const handleOpen = useEventCallback((event: React.UIEvent) => {
+    event.preventDefault();
+    setIsOpen(true);
+  });
 
-  const handleClose = useEventCallback(() => setIsOpen(false));
+  const handleClose = useEventCallback((event?: React.UIEvent) => {
+    event?.preventDefault();
+    setIsOpen(false);
+  });
 
   const handleChange = useEventCallback(
     (newValue: TValue, selectionState: PickerSelectionState = 'partial') =>

diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.types.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.types.ts
@@ -301,8 +301,8 @@ export interface UsePickerValueActions {
   onDismiss: () => void;
   onCancel: () => void;
   onSetToday: () => void;
-  onOpen: () => void;
-  onClose: () => void;
+  onOpen: (event: React.UIEvent) => void;
+  onClose: (event?: React.UIEvent) => void;
 }
 
 export type UsePickerValueFieldResponse<TValue, TSection extends FieldSection, TError> = Required<
@@ -316,7 +316,7 @@ export interface UsePickerValueViewsResponse<TValue> {
   value: TValue;
   onChange: (value: TValue, selectionState?: PickerSelectionState) => void;
   open: boolean;
-  onClose: () => void;
+  onClose: (event?: React.MouseEvent) => void;
 }
 
 /**

diff --git a/...s/DatePicker/BasicDesktopDatePickerV6.tsx → ...icker/BasicClearableDesktopDatePicker.tsx b/...s/DatePicker/BasicDesktopDatePickerV6.tsx → ...icker/BasicClearableDesktopDatePicker.tsx
@@ -3,7 +3,7 @@ import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 
-export default function BasicDesktopDatePickerV6() {
+export default function BasicClearableDesktopDatePicker() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DesktopDatePicker

diff --git a/test/e2e/index.test.ts b/test/e2e/index.test.ts
@@ -24,8 +24,8 @@ function sleep(timeoutMS: number): Promise<void> {
 // A simplified version of https://github.com/testing-library/dom-testing-library/blob/main/src/wait-for.js
 function waitFor(callback: () => Promise<void>): Promise<void> {
   return new Promise((resolve, reject) => {
-    let intervalId: NodeJS.Timer | null = null;
-    let timeoutId: NodeJS.Timer | null = null;
+    let intervalId: NodeJS.Timeout | null = null;
+    let timeoutId: NodeJS.Timeout | null = null;
     let lastError: any = null;
 
     function handleTimeout() {
@@ -558,6 +558,23 @@ async function initializeEnvironment(
           );
         });
 
+        // assertion for: https://github.com/mui/mui-x/issues/12652
+        it('should allow field editing after opening and closing the picker', async () => {
+          await renderFixture('DatePicker/BasicClearableDesktopDatePicker');
+          // open picker
+          await page.getByRole('button').click();
+          await page.waitForSelector('[role="dialog"]', { state: 'attached' });
+          // close picker
+          await page.getByRole('button', { name: 'Choose date' }).click();
+          await page.waitForSelector('[role="dialog"]', { state: 'detached' });
+
+          // click on the input to focus it
+          await page.getByRole('textbox').click();
+
+          // test that the input value is set after focus
+          expect(await page.getByRole('textbox').inputValue()).to.equal('MM/DD/YYYY');
+        });
+
         it('should allow filling in a value and clearing a value', async () => {
           await renderFixture('DatePicker/BasicDesktopDatePicker');
 
@@ -648,7 +665,7 @@ async function initializeEnvironment(
         });
 
         it('should focus the first field section after clearing a value in v6 input', async () => {
-          await renderFixture('DatePicker/BasicDesktopDatePickerV6');
+          await renderFixture('DatePicker/BasicClearableDesktopDatePicker');
 
           await page.getByRole('textbox').fill('2');
           await page.getByRole('button', { name: 'Clear value' }).click();