diff --git a/src/Menu.tsx b/src/Menu.tsx index 65a67ca3..ef4e7819 100644 --- a/src/Menu.tsx +++ b/src/Menu.tsx @@ -259,7 +259,8 @@ const Menu = React.forwardRef((props, ref) => { const containerRef = React.useRef(null); - const uuid = useId(id ? `rc-menu-uuid-${id}` : 'rc-menu-uuid'); + const mergedUuid = useId(); + const uuid = useId(id ? `rc-menu-uuid-${id}` : `rc-menu-uuid-${mergedUuid}`); const isRtl = direction === 'rtl'; diff --git a/tests/Menu.spec.tsx b/tests/Menu.spec.tsx index 3f629082..455fbbae 100644 --- a/tests/Menu.spec.tsx +++ b/tests/Menu.spec.tsx @@ -77,6 +77,41 @@ describe('Menu', () => { unmount(); }); + it('gives distinct popup ids to separate menu instances', () => { + const originEnv = process.env.NODE_ENV; + process.env.NODE_ENV = 'development'; + + const renderMenu = () => ( + + + Users + + + ); + + try { + const { container } = render( +
+ {renderMenu()} + {renderMenu()} +
, + ); + + act(() => { + jest.runAllTimers(); + }); + + const ids = Array.from(container.querySelectorAll('.rc-menu-submenu-popup [id]')).map( + el => (el as HTMLElement).id, + ); + + expect(ids).toHaveLength(2); + expect(new Set(ids).size).toBe(ids.length); + } finally { + process.env.NODE_ENV = originEnv; + } + }); + (['vertical', 'horizontal', 'inline'] as MenuMode[]).forEach(mode => { it(`${mode} menu correctly`, () => { const { container } = render(createMenu({ mode })); diff --git a/tests/__snapshots__/Keyboard.spec.tsx.snap b/tests/__snapshots__/Keyboard.spec.tsx.snap index ed660858..ff4ac0ed 100644 --- a/tests/__snapshots__/Keyboard.spec.tsx.snap +++ b/tests/__snapshots__/Keyboard.spec.tsx.snap @@ -1,4 +1,4 @@ -// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing +// Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Menu.Keyboard no data-menu-id by init 1`] = ` HTMLCollection [ @@ -13,11 +13,11 @@ HTMLCollection [ role="none" >