diff --git a/packages/@react-aria/listbox/src/useListBoxSection.ts b/packages/@react-aria/listbox/src/useListBoxSection.ts index 82952c43bcc..1b0a045cf4c 100644 --- a/packages/@react-aria/listbox/src/useListBoxSection.ts +++ b/packages/@react-aria/listbox/src/useListBoxSection.ts @@ -46,11 +46,15 @@ export function useListBoxSection(props: AriaListBoxSectionProps): ListBoxSectio role: 'presentation' }, headingProps: heading ? { - // Techincally, listbox cannot contain headings according to ARIA. + // Technically, listbox cannot contain headings according to ARIA. // We hide the heading from assistive technology, using role="presentation", // and only use it as a visual label for the nested group. id: headingId, - role: 'presentation' + role: 'presentation', + onMouseDown: (e) => { + // Prevent DOM focus from moving on mouse down when using virtual focus + e.preventDefault(); + } } : {}, groupProps: { role: 'group', diff --git a/packages/react-aria-components/test/ComboBox.test.js b/packages/react-aria-components/test/ComboBox.test.js index b786271a0da..cdd950f47a1 100644 --- a/packages/react-aria-components/test/ComboBox.test.js +++ b/packages/react-aria-components/test/ComboBox.test.js @@ -482,4 +482,70 @@ describe('ComboBox', () => { expect(onAction).toHaveBeenCalledTimes(2); expect(comboboxTester.combobox).toHaveValue('Cat'); }); + + it('should not close the combobox when clicking on a section header', async () => { + let tree = render( + + + +