react-component / react-component/tabs

duplicate key in tabs overflow menu

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

Nobody has claimed this yet.

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

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;
}

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.

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.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.