-
Notifications
You must be signed in to change notification settings - Fork 564
Open
Description
🐛 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 |
Metadata
Metadata
Assignees
Labels
No labels