Skip to content

fix: highlight BottomNavigation overflow selector for the first overflow item - #5414

Open
zigzagdev wants to merge 2 commits into
uber:mainfrom
zigzagdev:fix/bottom-navigation-overflow-active-index
Open

fix: highlight BottomNavigation overflow selector for the first overflow item#5414
zigzagdev wants to merge 2 commits into
uber:mainfrom
zigzagdev:fix/bottom-navigation-overflow-active-index

Conversation

@zigzagdev

Copy link
Copy Markdown
Contributor

Description

The overflow "More" selector's active state was computed as isActive={displayOverflow || activeKey > 4}, which is off-by-one.
Since navItems.length > MAX_SELECTORS (5), only indices 0-3 get their own direct Selector (navItems.slice(0, 4)); index 4 is already only reachable through the overflow panel/selector.
However, activeKey > 4 requires index 5 before the "More" tab lights up, so selecting the first overflow item (index 4) showed its panel while leaving the "More" tab unhighlighted.
Changed the condition to activeKey >= MAX_SELECTORS - 1.
Therefore, it matches the actual cutoff used when slicing selectors.

Scope

Patch: Bug Fix

…low item

isActive={displayOverflow || activeKey > 4} was off-by-one: when
navItems.length > 5, only indices 0-3 get their own Selector (MAX_SELECTORS - 1
of them), so index 4 is already only reachable via the overflow "More"
selector/panel, but activeKey > 4 required index 5 before the More tab
lit up. Use activeKey >= MAX_SELECTORS - 1 to match the actual cutoff.
Regression test for the off-by-one bug: with 6 items and activeKey=4
(the first item only reachable via the overflow panel), the "More"
tab must be marked aria-selected.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant