[ListboxUnstyled] Fix option state highlighted to prevent unnecessary…

… focus (#35838)
mui · Jan 31, 2023 · 94861ea · 94861ea
1 parent 14dba8d
commit 94861ea
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 1 deletion.
diff --git a/packages/mui-base/src/ListboxUnstyled/useListbox.ts b/packages/mui-base/src/ListboxUnstyled/useListbox.ts
@@ -267,7 +267,7 @@ export default function useListbox<TOption>(props: UseListboxParameters<TOption>
     return {
       selected,
       disabled,
-      highlighted: highlightedIndex === index,
+      highlighted: highlightedIndex === index && index !== -1,
     };
   };
 

diff --git a/packages/mui-base/src/MenuUnstyled/MenuUnstyled.test.tsx b/packages/mui-base/src/MenuUnstyled/MenuUnstyled.test.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
+import { spy } from 'sinon';
 import {
   createMount,
   createRenderer,
@@ -37,6 +38,39 @@ describe('MenuUnstyled', () => {
     skip: ['reactTestRenderer', 'propsSpread', 'componentProp', 'slotsProp'],
   }));
 
+  describe('after initialization', () => {
+    const spyFocus = spy();
+
+    function Test() {
+      React.useEffect(() => {
+        document.addEventListener('focus', spyFocus, true);
+        return () => {
+          document.removeEventListener('focus', spyFocus, true);
+        };
+      }, []);
+
+      return (
+        <MenuUnstyled {...defaultProps}>
+          <MenuItemUnstyled>1</MenuItemUnstyled>
+          <MenuItemUnstyled>2</MenuItemUnstyled>
+          <MenuItemUnstyled>3</MenuItemUnstyled>
+        </MenuUnstyled>
+      );
+    }
+
+    it('highlights the first item when the menu is opened', () => {
+      const { getAllByRole } = render(<Test />);
+      const [firstItem, ...otherItems] = getAllByRole('menuitem');
+
+      expect(firstItem.tabIndex).to.equal(0);
+      otherItems.forEach((item) => {
+        expect(item.tabIndex).to.equal(-1);
+      });
+      expect(spyFocus.callCount).to.equal(1);
+      expect(spyFocus.firstCall.args[0]).to.have.property('target', firstItem);
+    });
+  });
+
   describe('keyboard navigation', () => {
     it('changes the highlighted item using the arrow keys', () => {
       const { getByTestId } = render(