[DatePicker] Prevent scroll on open

mui · Feb 19, 2021 · d6061b7 · d6061b7
1 parent 8fcb6c0
commit d6061b7
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/packages/material-ui-lab/src/DesktopDatePicker/DesktopDatePicker.test.tsx b/packages/material-ui-lab/src/DesktopDatePicker/DesktopDatePicker.test.tsx
@@ -254,7 +254,7 @@ describe('<DesktopDatePicker />', () => {
     });
   });
 
-  describe.only('scroll', () => {
+  describe('scroll', () => {
     const NoTransition = React.forwardRef(function NoTransition(
       props: TransitionProps & { children?: React.ReactNode },
       ref: React.Ref<HTMLDivElement>,

diff --git a/packages/material-ui-lab/src/PickersDay/PickersDay.tsx b/packages/material-ui-lab/src/PickersDay/PickersDay.tsx
@@ -128,6 +128,8 @@ export interface PickersDayProps<TDate> extends ExtendMui<ButtonBaseProps> {
   onDaySelect: (day: TDate, isFinish: PickerSelectionState) => void;
 }
 
+const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
 const noop = () => {};
 
 /**
@@ -165,7 +167,9 @@ const PickersDay = React.forwardRef(function PickersDay<TDate>(
   const ref = React.useRef<HTMLButtonElement>(null);
   const handleRef = useForkRef(ref, forwardedRef);
 
-  React.useEffect(() => {
+  // Since this is rendered when a Popper is opened we can't use passive effects.
+  // Focusing in passive effects in Popper causes scroll jump.
+  useEnhancedEffect(() => {
     if (autoFocus && !disabled && !isAnimating && !outsideCurrentMonth) {
       // ref.current being null would be a bug in Material-UI
       ref.current!.focus();