diff --git a/packages/@react-aria/listbox/src/useListBox.ts b/packages/@react-aria/listbox/src/useListBox.ts index 5023f8fc86d..8774c71bab1 100644 --- a/packages/@react-aria/listbox/src/useListBox.ts +++ b/packages/@react-aria/listbox/src/useListBox.ts @@ -48,9 +48,6 @@ export interface AriaListBoxOptions extends Omit, 'childr */ shouldUseVirtualFocus?: boolean, - /** Whether options should be focused when the user hovers over them. */ - shouldFocusOnHover?: boolean, - /** * The behavior of links in the collection. * - 'action': link behaves like onAction. diff --git a/packages/@react-types/listbox/src/index.d.ts b/packages/@react-types/listbox/src/index.d.ts index d5f42fc0876..8391de95287 100644 --- a/packages/@react-types/listbox/src/index.d.ts +++ b/packages/@react-types/listbox/src/index.d.ts @@ -40,6 +40,8 @@ export interface AriaListBoxProps extends AriaListBoxPropsBase { selectionBehavior?: SelectionBehavior, /** Whether selection should occur on press up instead of press down. */ shouldSelectOnPressUp?: boolean, + /** Whether options should be focused when the user hovers over them. */ + shouldFocusOnHover?: boolean, /** * Handler that is called when a user performs an action on an item. The exact user event depends on * the collection's `selectionBehavior` prop and the interaction modality. diff --git a/packages/react-aria-components/test/ListBox.test.js b/packages/react-aria-components/test/ListBox.test.js index 7ca4f076d35..525e30ce4aa 100644 --- a/packages/react-aria-components/test/ListBox.test.js +++ b/packages/react-aria-components/test/ListBox.test.js @@ -1332,6 +1332,35 @@ describe('ListBox', () => { }); }); + describe('shouldFocusOnHover', () => { + it('should focus options on hovering with shouldFocusOnHover', async () => { + let {getAllByRole} = renderListbox({shouldFocusOnHover: true}); + let options = getAllByRole('option'); + let option1 = options[0]; + let option2 = options[1]; + + expect(option1).not.toHaveFocus(); + expect(option2).not.toHaveFocus(); + + await user.hover(option1); + expect(option1).toHaveFocus(); + + keyPress('ArrowDown'); + expect(option1).not.toHaveFocus(); + expect(option2).toHaveFocus(); + }); + + it.each([false, undefined])('should not focus options on hovering when shouldFocusOnHover is not true', async (shouldFocusOnHover) => { + let {getAllByRole} = renderListbox({shouldFocusOnHover}); + let option = getAllByRole('option')[0]; + + expect(option).not.toHaveFocus(); + + await user.hover(option); + expect(option).not.toHaveFocus(); + }); + }); + describe('async loading', () => { let items = [ {name: 'Foo'},