diff --git a/packages/mui-base/src/ListboxUnstyled/useListbox.ts b/packages/mui-base/src/ListboxUnstyled/useListbox.ts index 14ddc516519179..30d5eee08f574b 100644 --- a/packages/mui-base/src/ListboxUnstyled/useListbox.ts +++ b/packages/mui-base/src/ListboxUnstyled/useListbox.ts @@ -267,7 +267,7 @@ export default function useListbox(props: UseListboxParameters 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 index 2507e801cc2ceb..649ea9b0c6f107 100644 --- 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 ( + + 1 + 2 + 3 + + ); + } + + it('highlights the first item when the menu is opened', () => { + const { getAllByRole } = render(); + 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(