From ff4986ae42d5997352b23f44b224b8352b0e9e0d Mon Sep 17 00:00:00 2001 From: Said MARAR Date: Sun, 15 Jan 2023 23:07:07 +0100 Subject: [PATCH 1/5] [ListboxUnstyled] Fix option state highlighted to prevent unnecessary focus --- packages/mui-base/src/ListboxUnstyled/useListbox.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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, }; }; From beae4dda35f99595c6eae38286c913d184756078 Mon Sep 17 00:00:00 2001 From: Said MARAR Date: Fri, 27 Jan 2023 18:53:09 +0100 Subject: [PATCH 2/5] [menuUnstyled] after the menu is initialized and opened the first item is the only one that receive focus --- .../src/MenuUnstyled/MenuUnstyled.test.tsx | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/packages/mui-base/src/MenuUnstyled/MenuUnstyled.test.tsx b/packages/mui-base/src/MenuUnstyled/MenuUnstyled.test.tsx index 2507e801cc2ceb..a418a722fc9101 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,43 @@ describe('MenuUnstyled', () => { skip: ['reactTestRenderer', 'propsSpread', 'componentProp', 'slotsProp'], })); + describe('after initialization', () => { + const spyFocus = spy(); + + afterEach(() => { + spyFocus.resetHistory(); + }); + + const Test = () => { + React.useEffect(() => { + document.addEventListener('focus', spyFocus, true); + return () => { + document.removeEventListener('focus', spyFocus, true); + }; + }, []); + + return ( + + 1 + 2 + 3 + + ); + }; + + it('when menu is opened it highlights one item and it must be the first one', () => { + const { getAllByTestId } = render(); + const [firstItem, ...otherItems] = getAllByTestId(/^item-/); + + 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( From fbafdc48ea574bcad6ba147e9215bba5e6328741 Mon Sep 17 00:00:00 2001 From: Said MARAR Date: Fri, 27 Jan 2023 18:56:28 +0100 Subject: [PATCH 3/5] update --- packages/mui-base/src/MenuUnstyled/MenuUnstyled.test.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/mui-base/src/MenuUnstyled/MenuUnstyled.test.tsx b/packages/mui-base/src/MenuUnstyled/MenuUnstyled.test.tsx index a418a722fc9101..d2c45b9465753d 100644 --- a/packages/mui-base/src/MenuUnstyled/MenuUnstyled.test.tsx +++ b/packages/mui-base/src/MenuUnstyled/MenuUnstyled.test.tsx @@ -41,10 +41,6 @@ describe('MenuUnstyled', () => { describe('after initialization', () => { const spyFocus = spy(); - afterEach(() => { - spyFocus.resetHistory(); - }); - const Test = () => { React.useEffect(() => { document.addEventListener('focus', spyFocus, true); From d8cfd08f975b49fe267fe748f1fd988dae6951a3 Mon Sep 17 00:00:00 2001 From: Said MARAR Date: Fri, 27 Jan 2023 19:15:21 +0100 Subject: [PATCH 4/5] fix lint --- packages/mui-base/src/MenuUnstyled/MenuUnstyled.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-base/src/MenuUnstyled/MenuUnstyled.test.tsx b/packages/mui-base/src/MenuUnstyled/MenuUnstyled.test.tsx index d2c45b9465753d..f9527771c5f513 100644 --- a/packages/mui-base/src/MenuUnstyled/MenuUnstyled.test.tsx +++ b/packages/mui-base/src/MenuUnstyled/MenuUnstyled.test.tsx @@ -41,7 +41,7 @@ describe('MenuUnstyled', () => { describe('after initialization', () => { const spyFocus = spy(); - const Test = () => { + function Test() { React.useEffect(() => { document.addEventListener('focus', spyFocus, true); return () => { @@ -56,7 +56,7 @@ describe('MenuUnstyled', () => { 3 ); - }; + } it('when menu is opened it highlights one item and it must be the first one', () => { const { getAllByTestId } = render(); From 1a5c1ce80daf9dc62013c7bc474814e6b26d4c56 Mon Sep 17 00:00:00 2001 From: Said MARAR Date: Sun, 29 Jan 2023 11:17:28 +0100 Subject: [PATCH 5/5] remove testid --- .../mui-base/src/MenuUnstyled/MenuUnstyled.test.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/mui-base/src/MenuUnstyled/MenuUnstyled.test.tsx b/packages/mui-base/src/MenuUnstyled/MenuUnstyled.test.tsx index f9527771c5f513..649ea9b0c6f107 100644 --- a/packages/mui-base/src/MenuUnstyled/MenuUnstyled.test.tsx +++ b/packages/mui-base/src/MenuUnstyled/MenuUnstyled.test.tsx @@ -51,16 +51,16 @@ describe('MenuUnstyled', () => { return ( - 1 - 2 - 3 + 1 + 2 + 3 ); } - it('when menu is opened it highlights one item and it must be the first one', () => { - const { getAllByTestId } = render(); - const [firstItem, ...otherItems] = getAllByTestId(/^item-/); + 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) => {