diff --git a/src/components/ListItemBase/ListItemBase.tsx b/src/components/ListItemBase/ListItemBase.tsx index 798333893b..ddd9384de0 100644 --- a/src/components/ListItemBase/ListItemBase.tsx +++ b/src/components/ListItemBase/ListItemBase.tsx @@ -136,6 +136,10 @@ const ListItemBase = (props: Props, providedRef: RefOrCallbackRef) => { if (ref.current === document.activeElement || event.key === KEYS.TAB_KEY) { pressProps.onKeyDown(event); } + + if (event.key === KEYS.SPACE_KEY) { + ref.current.click(); + } }, }; diff --git a/src/components/MenuTrigger/MenuTrigger.unit.test.tsx b/src/components/MenuTrigger/MenuTrigger.unit.test.tsx index 6e6532b88a..8c872bed7d 100644 --- a/src/components/MenuTrigger/MenuTrigger.unit.test.tsx +++ b/src/components/MenuTrigger/MenuTrigger.unit.test.tsx @@ -474,6 +474,38 @@ describe(' - React Testing Library', () => { expect(await screen.findByRole('menuitemradio', { name: 'One' })).toHaveFocus(); }); + it('should close the menu when closeOnSelect is true via Keyboard', async () => { + const user = userEvent.setup(); + + render(); + + await openMenu(user, screen); + + screen.getByRole('menuitemradio', { name: 'One' }).focus(); + + await user.keyboard('{enter}'); + + await waitFor(() => { + expect(screen.queryByRole('menu', { name: 'Single Menu' })).not.toBeInTheDocument(); + }); + }); + + it('should not close the menu when closeOnSelect is false via Keyboard', async () => { + const user = userEvent.setup(); + + render(); + + await openMenu(user, screen); + + screen.getByRole('menuitemradio', { name: 'One' }).focus(); + + await user.keyboard('{enter}'); + + await waitFor(() => { + expect(screen.queryByRole('menu', { name: 'Single Menu' })).toBeInTheDocument(); + }); + }); + it('selects option on Space', async () => { const user = userEvent.setup();