[Dropdown] False positive isSelected
when descendant cannot be found #985
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
Assignees
Labels
No labels