Support hiding of all TabPanels
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 3.1k
- Forks
- 455
- Avg merge
- 5h 9m
- Merged PRs (30d)
- 2
Description
Firstly, thanks for this great lib. The focus on a11y is a huge +1.
The UI I'm aiming for is a tab-strip with all the tab panels closed, and a tab is activated only when the user selects a tab. It looks like react-tabs doesn't currently support hiding all the tab panels.
I searched the issues here to find #287, but this seems to be using a CSS-only solution. This will still cause the DOM to have the tab panel. This not only adds unnecessary stuff to the DOM (my tab panel could have a lot of DOM nodes), but also fires off the rendering lifecycle of the tab panel's contents, including all the hooks for that panel. In my case, this would trigger network requests and such, which I would like to avoid.
Would it be possible to build support for something like defaultIndex={null}, so that all tab panels can be hidden away until needed?
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by tracing react-tabs handling of defaultIndex and how TabPanel rendering responds when no tab is selected. Define the behavior for defaultIndex={null}, including activation after a tab selection, and cover both the initially empty state and subsequent selection with tests.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100