diff --git a/components/dropdown/__tests__/dropdown-button.test.tsx b/components/dropdown/__tests__/dropdown-button.test.tsx index c4e769ac3d..040d7a4bd5 100644 --- a/components/dropdown/__tests__/dropdown-button.test.tsx +++ b/components/dropdown/__tests__/dropdown-button.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; -import { render } from '../../../tests/utils'; +import { render, waitFakeTimer } from '../../../tests/utils'; import type { DropdownProps } from '../dropdown'; import DropdownButton from '../dropdown-button'; @@ -156,4 +156,17 @@ describe('DropdownButton', () => { render(); expect(dropdownRender).toHaveBeenCalled(); }); + + it('should support focus menu when set autoFocus', async () => { + jest.useFakeTimers(); + const items = [ + { + label: 'foo', + key: '1', + }, + ]; + const { container } = render(); + await waitFakeTimer(); + expect(container.querySelector('.ant-dropdown-menu-item-active')).toBeTruthy(); + }); }); diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx index eecd78ae12..eb3e18e80c 100644 --- a/components/dropdown/dropdown.tsx +++ b/components/dropdown/dropdown.tsx @@ -14,7 +14,6 @@ import { ConfigContext } from '../config-provider'; import type { MenuProps } from '../menu'; import Menu from '../menu'; import { OverrideProvider } from '../menu/OverrideContext'; -import { NoCompactStyle } from '../space/Compact'; import theme from '../theme'; import useStyle from './style'; @@ -274,7 +273,7 @@ const Dropdown: CompoundedComponent = (props) => { ); }} > - {overlayNode} + {overlayNode} ); }; diff --git a/components/menu/OverrideContext.tsx b/components/menu/OverrideContext.tsx index ba663f69f5..bec81a456b 100644 --- a/components/menu/OverrideContext.tsx +++ b/components/menu/OverrideContext.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { NoCompactStyle } from '../space/Compact'; import type { MenuProps } from './menu'; // Used for Dropdown only @@ -14,9 +15,10 @@ export interface OverrideContextProps { const OverrideContext = React.createContext(null); /** @internal Only used for Dropdown component. Do not use this in your production. */ -export const OverrideProvider: React.FC = ( - props, -) => { +export const OverrideProvider = React.forwardRef< + HTMLElement, + OverrideContextProps & { children: React.ReactNode } +>((props, ref) => { const { children, ...restProps } = props; const override = React.useContext(OverrideContext); @@ -32,8 +34,12 @@ export const OverrideProvider: React.FC{children}; -}; + return ( + + {React.cloneElement(children as React.ReactElement, { ref })} + + ); +}); /** @internal Only used for Dropdown component. Do not use this in your production. */ export default OverrideContext;