diff --git a/src/Menu.tsx b/src/Menu.tsx index a2eb9270..8e395fbb 100644 --- a/src/Menu.tsx +++ b/src/Menu.tsx @@ -27,6 +27,7 @@ import { PathRegisterContext, PathUserContext } from './context/PathContext'; import useKeyRecords, { OVERFLOW_KEY } from './hooks/useKeyRecords'; import { IdContext } from './context/IdContext'; import PrivateContext from './context/PrivateContext'; +import { composeRef } from 'rc-util/lib/ref'; /** * Menu modify after refactor: @@ -136,7 +137,7 @@ interface LegacyMenuProps extends MenuProps { openAnimation?: string; } -const Menu: React.FC = props => { +const Menu = React.forwardRef((props, ref) => { const { prefixCls = 'rc-menu', style, @@ -214,6 +215,7 @@ const Menu: React.FC = props => { const [mounted, setMounted] = React.useState(false); const containerRef = React.useRef(); + const mergedRef = composeRef(containerRef, ref); const uuid = useUUID(id); @@ -479,7 +481,7 @@ const Menu: React.FC = props => { const container = ( = props => { ); -}; +}); export default Menu; diff --git a/tests/Menu.spec.js b/tests/Menu.spec.js index a9a803f1..430fa1b7 100644 --- a/tests/Menu.spec.js +++ b/tests/Menu.spec.js @@ -647,5 +647,17 @@ describe('Menu', () => { jest.useRealTimers(); }); }); + + it('should support ref', () => { + const menuRef = React.createRef(); + + mount( + + Light + , + ); + + expect(menuRef.current).toBeTruthy(); + }); }); /* eslint-enable */ diff --git a/tests/SubMenu.spec.js b/tests/SubMenu.spec.js index 7c17b949..41b9bf17 100644 --- a/tests/SubMenu.spec.js +++ b/tests/SubMenu.spec.js @@ -366,7 +366,7 @@ describe('SubMenu', () => { ); const wrapper = mount(); - expect(wrapper.find('Menu ul').prop('style')).toEqual({ + expect(wrapper.find('.rc-menu').first().prop('style')).toEqual({ backgroundColor: 'black', }); });