[DateRangePicker] Fix input focused style and mobile behaviour (#6645) (

#6714)
mui · Nov 2, 2022 · 4c6ea8c · 4c6ea8c
1 parent e9d8912
commit 4c6ea8c
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 6 deletions.
diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerInput.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerInput.tsx
@@ -79,6 +79,7 @@ export interface DateRangePickerInputProps<TInputDate, TDate>
   validationError: DateRangeValidationError;
   rawValue: DateRange<TInputDate>;
   classes?: Partial<DateRangePickerInputClasses>;
+  mobile?: boolean;
 }
 
 type DatePickerInputComponent = <TInputDate, TDate>(
@@ -113,6 +114,7 @@ export const DateRangePickerInput = React.forwardRef(function DateRangePickerInp
     TextFieldProps,
     validationError: [startValidationError, endValidationError],
     className,
+    mobile,
     ...other
   } = props;
 
@@ -149,7 +151,10 @@ export const DateRangePickerInput = React.forwardRef(function DateRangePickerInp
     lazyHandleChangeCallback([utils.date(start), date], inputString);
   };
 
-  const openRangeStartSelection = () => {
+  const openRangeStartSelection = (
+    event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
+  ) => {
+    event.stopPropagation();
     if (setCurrentlySelectingRangeEnd) {
       setCurrentlySelectingRangeEnd('start');
     }
@@ -158,7 +163,10 @@ export const DateRangePickerInput = React.forwardRef(function DateRangePickerInp
     }
   };
 
-  const openRangeEndSelection = () => {
+  const openRangeEndSelection = (
+    event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
+  ) => {
+    event.stopPropagation();
     if (setCurrentlySelectingRangeEnd) {
       setCurrentlySelectingRangeEnd('end');
     }
@@ -188,12 +196,16 @@ export const DateRangePickerInput = React.forwardRef(function DateRangePickerInp
     TextFieldProps: {
       ...TextFieldProps,
       ref: startRef,
-      focused: open && currentlySelectingRangeEnd === 'start',
+      focused: open ? currentlySelectingRangeEnd === 'start' : undefined,
+      // registering `onClick` listener on the root element as well to correctly handle cases where user is clicking on `label`
+      // which has `pointer-events: none` and due to DOM structure the `input` does not catch the click event
+      ...(!readOnly && !other.disabled && { onClick: openRangeStartSelection }),
     },
     inputProps: {
       onClick: openRangeStartSelection,
       onKeyDown: onSpaceOrEnter(openRangeStartSelection),
       onFocus: focusOnRangeStart,
+      readOnly: mobile,
     },
   });
 
@@ -207,12 +219,16 @@ export const DateRangePickerInput = React.forwardRef(function DateRangePickerInp
     TextFieldProps: {
       ...TextFieldProps,
       ref: endRef,
-      focused: open && currentlySelectingRangeEnd === 'end',
+      focused: open ? currentlySelectingRangeEnd === 'end' : undefined,
+      // registering `onClick` listener on the root element as well to correctly handle cases where user is clicking on `label`
+      // which has `pointer-events: none` and due to DOM structure the `input` does not catch the click event
+      ...(!readOnly && !other.disabled && { onClick: openRangeEndSelection }),
     },
     inputProps: {
       onClick: openRangeEndSelection,
       onKeyDown: onSpaceOrEnter(openRangeEndSelection),
       onFocus: focusOnRangeEnd,
+      readOnly: mobile,
     },
   });
 

diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.test.tsx
@@ -295,6 +295,23 @@ describe('<MobileDateRangePicker />', () => {
       expect(onClose.callCount).to.equal(1);
     });
 
+    it('should correctly set focused styles when input is focused', () => {
+      render(<WrappedMobileDateRangePicker initialValue={[null, null]} />);
+
+      const firstInput = screen.getAllByRole('textbox')[0];
+      fireEvent.focus(firstInput);
+
+      expect(screen.getByText('Start', { selector: 'label' })).to.have.class('Mui-focused');
+    });
+
+    it('should render "readonly" input elements', () => {
+      render(<WrappedMobileDateRangePicker initialValue={[null, null]} />);
+
+      screen.getAllByRole('textbox').forEach((input) => {
+        expect(input).to.have.attribute('readonly');
+      });
+    });
+
     it('should allow `shouldDisableDate` to depends on start or end date', () => {
       render(
         <WrappedMobileDateRangePicker

diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx
@@ -106,6 +106,7 @@ export const MobileDateRangePicker = React.forwardRef(function MobileDateRangePi
     setCurrentlySelectingRangeEnd,
     validationError,
     ref,
+    mobile: true,
   };
 
   return (

diff --git a/packages/x-date-pickers/src/internals/utils/utils.ts b/packages/x-date-pickers/src/internals/utils/utils.ts
@@ -10,10 +10,13 @@ export function arrayIncludes<T>(array: T[] | readonly T[], itemOrItems: T | T[]
 }
 
 export const onSpaceOrEnter =
-  (innerFn: () => void, onFocus?: (event: React.KeyboardEvent<any>) => void) =>
+  (
+    innerFn: (ev: React.MouseEvent<any> | React.KeyboardEvent<any>) => void,
+    onFocus?: (event: React.KeyboardEvent<any>) => void,
+  ) =>
   (event: React.KeyboardEvent) => {
     if (event.key === 'Enter' || event.key === ' ') {
-      innerFn();
+      innerFn(event);
 
       // prevent any side effects
       event.preventDefault();