react-component / react-component/tabs

ScrollableInkBar position is incorrect

Open
#140 0 comments 3 reactions 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

I'm using Tabs from Ant Design and apparently they use the ScrollableInkBar component from this lib. As of few days ago, the ink bar has stopped showing for our vertical tabs and upon investigation I found that it's being positioned way above where it should be (and subsequently hidden as overflow). In other words:

Expected

Ink bar shows over the selected vertical tab.

Actual

Ink bar is positioned somewhere else completely. Might be that its position from the top edge of the viewport is what it should be from the top edge of the tabs container, but that's just a hunch. In any case, the ink bar position changes appropriately (relative) when tab selection changes, but the base offset is wrong.

Additional Notes

Further investigation yielded the fact that there was a corresponding release here ~3 days ago. The version from before that release (9.4.1) works correctly, the latest version (9.4.3) does not. There was only one relevant commit in that release, so that's what must've broken the functionality.

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 by reviewing the linked commit d57dbf0826513e8c76cae49f286be80e6994bc05 and comparing ScrollableInkBar behavior between versions 9.4.1 and 9.4.3. Reproduce the issue with vertical Tabs, then verify that the ink bar stays aligned with the selected tab when selection changes and is not hidden by overflow.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.