🐛 Bug report
Current Behavior
isSelected is set based on comparing index and selectionIndex. But if the descendant cannot be found and there is no selection the menu item is incorrectly marked as selected
let isSelected = index === selectionIndex && !disabled;
On the next render this is fixed because the descendant can be found.
Expected behavior
On first render if a descendant cannot be found do not mark it as selected
Suggested solution(s)
Adding an additional check that the index is greater or equal to 0
let isSelected = index >= 0 && index === selectionIndex && !disabled;
Additional context
I'm actually using menu-button in custom components. A not rendering the MenuPopover until isExpanded is true, cause I'm on React 18 and following the suggestions here
Your environment
| Software |
Name(s) |
Version |
| Reach Package |
menu-button |
0.18.0 |
| React |
|
18.2.0 |
| Browser |
Firefox |
113 |
| Assistive tech |
- |
- |
| Node |
|
16 |
| npm/yarn |
yarn |
1.22.19 |
| Operating System |
macOS |
13.3 |
🐛 Bug report
Current Behavior
isSelected is set based on comparing
indexandselectionIndex. But if the descendant cannot be found and there is no selection the menu item is incorrectly marked as selectedOn the next render this is fixed because the descendant can be found.
Expected behavior
On first render if a descendant cannot be found do not mark it as selected
Suggested solution(s)
Adding an additional check that the index is greater or equal to 0
Additional context
I'm actually using
menu-buttonin custom components. A not rendering theMenuPopoveruntilisExpandedis true, cause I'm on React 18 and following the suggestions hereYour environment