Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

duplicate key in tabs overflow menu

Open
#444 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
35/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Stale
Tech stack
react, typescript
Domain
frontend

Research direction

Start with src/hooks/useVisibleRange.ts at lines 42-61 and trace how its range is used to build hiddenTabs in TabNavList. Reproduce the overflow case with a custom tab element or CSS that affects measurement, then verify the overflow menu no longer contains duplicate items when startIndex exceeds endIndex.

Written by the indexing model from the issue text.

Description

in this function, sometimes the startIndex is bigger than the endIndex, causing the menu for hiddenTabs in TabNavList to have duplicated items.
I guess some tab extra element with user defined css can cause it to measure things incorrectly.

https://github.com/react-component/tabs/blob/a4ce7c465f75ae7f4004807dd5f3af435889808e/src/hooks/useVisibleRange.ts#L42-L61

could we add a simple protection like

if (startIndex > endIndex) {
  endIndex = startIndex;
}

Dominant language
TypeScript
Stars
572
Forks
241
Avg merge
4d 18h
Merged PRs (30d)
4

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from react-component/tabs

All issues in react-component/tabs

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.