fix: prevent autoFocus from scrolling dropdown menu

src/hooks/useAccessibility.ts

@@ -27,9 +27,9 @@ export default function useAccessibility({
     }
   };
 
-  const focusMenu = () => {
+  const focusMenu = (options?: FocusOptions) => {
     if (overlayRef.current?.focus) {
-      overlayRef.current.focus();
+      overlayRef.current.focus(options);
       focusMenuRef.current = true;
       return true;
     }
@@ -62,7 +62,7 @@ export default function useAccessibility({
       window.addEventListener('keydown', handleKeyDown);
       if (autoFocus) {
         // FIXME: hack with raf
-        raf(focusMenu, 3);
+        raf(() => focusMenu({ preventScroll: true }), 3);
       }
       return () => {
         window.removeEventListener('keydown', handleKeyDown);

tests/basic.test.tsx

@@ -586,42 +586,47 @@ describe('dropdown', () => {
 
   it('should support autoFocus', async () => {
     jest.useFakeTimers();
+    const focusSpy = jest.spyOn(HTMLElement.prototype, 'focus');
 
-    const overlay = (
-      <Menu>
-        <MenuItem key="1">
-          <span className="my-menuitem">one</span>
-        </MenuItem>
-        <MenuItem key="2">two</MenuItem>
-      </Menu>
-    );
-    const { container } = render(
-      <Dropdown autoFocus trigger={['click']} overlay={overlay}>
-        <button className="my-button">open</button>
-      </Dropdown>,
-    );
-    const trigger = container.querySelector('.my-button');
-
-    // Open menu
-    fireEvent.click(trigger);
-
-    await waitForTime();
-
-    expect(
-      container
-        .querySelector('.rc-dropdown')
-        .classList.contains('rc-dropdown-hidden'),
-    ).toBeFalsy();
-    expect(document.activeElement.className).toContain('menu');
-
-    // Close menu with Tab
-    window.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 9 })); // Tab
-
-    await waitForTime();
-
-    expect(document.activeElement.className).toContain('my-button');
-
-    jest.useRealTimers();
+    try {
+      const overlay = (
+        <Menu>
+          <MenuItem key="1">
+            <span className="my-menuitem">one</span>
+          </MenuItem>
+          <MenuItem key="2">two</MenuItem>
+        </Menu>
+      );
+      const { container } = render(
+        <Dropdown autoFocus trigger={['click']} overlay={overlay}>
+          <button className="my-button">open</button>
+        </Dropdown>,
+      );
+      const trigger = container.querySelector('.my-button');
+
+      // Open menu
+      fireEvent.click(trigger);
+
+      await waitForTime();
+
+      expect(
+        container
+          .querySelector('.rc-dropdown')
+          .classList.contains('rc-dropdown-hidden'),
+      ).toBeFalsy();
+      expect(document.activeElement.className).toContain('menu');
+      expect(focusSpy).toHaveBeenCalledWith({ preventScroll: true });
+
+      // Close menu with Tab
+      window.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 9 })); // Tab
+
+      await waitForTime();
+
+      expect(document.activeElement.className).toContain('my-button');
+    } finally {
+      focusSpy.mockRestore();
+      jest.useRealTimers();
+    }
   });
 
   it('children cannot be given ref should not throw', () => {