From 0a8c22f29b12c77ebe58b5a2e993e51c5c911e75 Mon Sep 17 00:00:00 2001
From: Application-drop-up <msts.oo0131@gmail.com>
Date: Sun, 6 Sep 2026 19:36:32 +0900
Subject: [PATCH 1/2] fix: highlight BottomNavigation overflow selector for the
 first overflow 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.
---
 src/bottom-navigation/bottom-navigation.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/bottom-navigation/bottom-navigation.tsx b/src/bottom-navigation/bottom-navigation.tsx
index 61c0e52332..8a94a40e0b 100644
--- a/src/bottom-navigation/bottom-navigation.tsx
+++ b/src/bottom-navigation/bottom-navigation.tsx
@@ -79,7 +79,7 @@ const BottomNavigation = ({
       title="More"
       icon={Overflow}
       onChange={() => setDisplayOverflow(true)}
-      isActive={displayOverflow || activeKey > 4}
+      isActive={displayOverflow || activeKey >= MAX_SELECTORS - 1}
       overrides={{ Title: overrides.OverflowTitle, Selector: overrides.OverflowSelector }}
       key={'more'}
     />

From b2fa22f63cc1c734f8f84a7af71fa5064798c343 Mon Sep 17 00:00:00 2001
From: Application-drop-up <msts.oo0131@gmail.com>
Date: Sun, 6 Sep 2026 19:37:05 +0900
Subject: [PATCH 2/2] test: cover BottomNavigation overflow selector active
 state

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.
---
 .../__tests__/bottom-navigation.test.tsx      | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 src/bottom-navigation/__tests__/bottom-navigation.test.tsx

diff --git a/src/bottom-navigation/__tests__/bottom-navigation.test.tsx b/src/bottom-navigation/__tests__/bottom-navigation.test.tsx
new file mode 100644
index 0000000000..4709b19ca4
--- /dev/null
+++ b/src/bottom-navigation/__tests__/bottom-navigation.test.tsx
@@ -0,0 +1,29 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { BottomNavigation, NavItem } from '..';
+import { Overflow } from '../../icon';
+
+describe('BottomNavigation', () => {
+  it('highlights the overflow selector when the active item is only reachable via More', () => {
+    const items = Array.from({ length: 6 }).map((_, idx) => (
+      <NavItem key={idx} title={`Item ${idx}`} icon={Overflow}>
+        {`panel ${idx}`}
+      </NavItem>
+    ));
+
+    const { getByText } = render(<BottomNavigation activeKey={4}>{items}</BottomNavigation>);
+
+    // Item 4 only renders inside the overflow panel/selector (the first 4 items get
+    // direct selectors), so its being active must highlight the "More" tab.
+    const moreTab = getByText('More').closest('[role="tab"]');
+    expect(moreTab).toHaveAttribute('aria-selected', 'true');
+  });
+});