From 6566cf18531b6be6a6ef0cbdc188ec31034294d6 Mon Sep 17 00:00:00 2001 From: Xapollon430 <42275242+Xapollon430@users.noreply.github.com> Date: Sun, 8 Nov 2026 21:01:17 -0500 Subject: [PATCH] fix: ignore Enter on disabled menu items --- src/MenuItem.tsx | 2 +- tests/DisabledKeyboard.spec.tsx | 27 +++++++++++++++++++++++++++ 2 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 tests/DisabledKeyboard.spec.tsx diff --git a/src/MenuItem.tsx b/src/MenuItem.tsx index cda3d0c4..8fa4ebd0 100644 --- a/src/MenuItem.tsx +++ b/src/MenuItem.tsx @@ -185,7 +185,7 @@ const InternalMenuItem = React.forwardRef((props: MenuItemProps, ref: React.Ref< const onInternalKeyDown: React.KeyboardEventHandler = e => { onKeyDown?.(e); - if (e.which === KeyCode.ENTER) { + if (!mergedDisabled && e.which === KeyCode.ENTER) { const info = getEventInfo(e); // Legacy. Key will also trigger click event diff --git a/tests/DisabledKeyboard.spec.tsx b/tests/DisabledKeyboard.spec.tsx new file mode 100644 index 00000000..aac1b572 --- /dev/null +++ b/tests/DisabledKeyboard.spec.tsx @@ -0,0 +1,27 @@ +import { fireEvent, render } from '@testing-library/react'; +import { KeyCode } from '@rc-component/util'; +import React from 'react'; +import Menu, { MenuItem } from '../src'; + +describe('Disabled menu keyboard selection', () => { + it('ignores Enter after a focused item becomes disabled', () => { + const onSelect = jest.fn(); + const menu = (disabled = false) => ( + + Apple + Orange + + ); + const { getByRole, rerender } = render(menu()); + const orange = getByRole('menuitem', { name: 'Orange' }); + orange.focus(); + rerender(menu(true)); + + fireEvent.keyDown(orange, { key: 'Enter', keyCode: KeyCode.ENTER, which: KeyCode.ENTER }); + expect(onSelect).not.toHaveBeenCalled(); + + rerender(menu()); + fireEvent.keyDown(orange, { key: 'Enter', keyCode: KeyCode.ENTER, which: KeyCode.ENTER }); + expect(onSelect).toHaveBeenCalledTimes(1); + }); +});