diff --git a/src/BaseSelect/index.tsx b/src/BaseSelect/index.tsx index 1c65c250..53f3ace7 100644 --- a/src/BaseSelect/index.tsx +++ b/src/BaseSelect/index.tsx @@ -463,9 +463,11 @@ const BaseSelect = React.forwardRef((props, ref) const { key } = event; const isEnterKey = key === 'Enter'; + const isSpaceKey = key === ' '; - if (isEnterKey) { - // Do not submit form when type in the input + // Enter or Space opens dropdown (ARIA combobox: spacebar should open) + if (isEnterKey || isSpaceKey) { + // Do not submit form when type in the input; prevent Space from scrolling page if (mode !== 'combobox') { event.preventDefault(); } @@ -507,7 +509,7 @@ const BaseSelect = React.forwardRef((props, ref) } } - if (mergedOpen && (!isEnterKey || !keyLockRef.current)) { + if (mergedOpen && (!isEnterKey || !keyLockRef.current) && !isSpaceKey) { // Lock the Enter key after it is pressed to avoid repeated triggering of the onChange event. if (isEnterKey) { keyLockRef.current = true; diff --git a/tests/Accessibility.test.tsx b/tests/Accessibility.test.tsx index 364cc37d..c9565e7b 100644 --- a/tests/Accessibility.test.tsx +++ b/tests/Accessibility.test.tsx @@ -21,6 +21,28 @@ describe('Select.Accessibility', () => { expect(container.querySelector('input')!.getAttribute('aria-label')).toEqual('light'); }); + // https://github.com/ant-design/ant-design/issues/56841 + it('spacebar opens dropdown (ARIA combobox)', () => { + const { container } = render( +