diff --git a/src/hooks/useAccessibility.ts b/src/hooks/useAccessibility.ts index 7f31291..a946e39 100644 --- a/src/hooks/useAccessibility.ts +++ b/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); diff --git a/tests/basic.test.tsx b/tests/basic.test.tsx index f6a6e41..ed7e5cf 100644 --- a/tests/basic.test.tsx +++ b/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 = ( - - - one - - two - - ); - const { container } = render( - - - , - ); - 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 = ( + + + one + + two + + ); + const { container } = render( + + + , + ); + 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', () => {