feat: expose shouldFocusOnHover prop for ListBox (#8171)

Author: lucasweng

packages/@react-aria/listbox/src/useListBox.ts

@@ -48,9 +48,6 @@ export interface AriaListBoxOptions<T> extends Omit<AriaListBoxProps<T>, '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.

packages/@react-types/listbox/src/index.d.ts

@@ -40,6 +40,8 @@ export interface AriaListBoxProps<T> extends AriaListBoxPropsBase<T> {
   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.

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'},