Skip to content

[Dropdown] False positive isSelected when descendant cannot be found #985

Open
@JaceHensley

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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions