diff --git a/src/utils/nodeUtil.tsx b/src/utils/nodeUtil.tsx index eac86f49..51dd7d47 100644 --- a/src/utils/nodeUtil.tsx +++ b/src/utils/nodeUtil.tsx @@ -13,13 +13,15 @@ function convertItemsToNodes(list: ItemType[]) { if (opt && typeof opt === 'object') { const { label, children, key, type, ...restProps } = opt as any; const mergedKey = key ?? `tmp-${index}`; + // The type of `key` changes, `eventKey` is the original value + const mergeProps = { key: mergedKey, eventKey: mergedKey, ...restProps, }; // MenuItemGroup & SubMenuItem if (children || type === 'group') { if (type === 'group') { // Group return ( - + {convertItemsToNodes(children)} ); @@ -27,7 +29,7 @@ function convertItemsToNodes(list: ItemType[]) { // Sub Menu return ( - + {convertItemsToNodes(children)} ); @@ -35,11 +37,11 @@ function convertItemsToNodes(list: ItemType[]) { // MenuItem & Divider if (type === 'divider') { - return ; + return ; } return ( - + {label} ); diff --git a/tests/Options.spec.tsx b/tests/Options.spec.tsx index cc7bf8c7..2efa23db 100644 --- a/tests/Options.spec.tsx +++ b/tests/Options.spec.tsx @@ -1,5 +1,5 @@ /* eslint-disable no-undef */ -import { render } from '@testing-library/react'; +import { fireEvent, render } from '@testing-library/react'; import React from 'react'; import Menu from '../src'; @@ -41,5 +41,35 @@ describe('Options', () => { expect(container.children).toMatchSnapshot(); }); + + it('key type is matched', () => { + const onSelect = jest.fn(); + + const { container } = render( + , + ); + + fireEvent.click(container.querySelectorAll('.rc-menu-item')[0]); + expect(onSelect).toHaveBeenCalledWith( + expect.objectContaining({ selectedKeys: ['1'] }), + ); + + fireEvent.click(container.querySelectorAll('.rc-menu-item')[1]); + expect(onSelect).toHaveBeenCalledWith( + expect.objectContaining({ selectedKeys: [2] }), + ); + }); }); /* eslint-enable */