[Tabs] Invalid value warning triggered when using React.lazy
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
v5.0.4
Much like the description in #8489, when using dynamic data to generate tabs and their contents, I receive the error:
MUI: The
valueprovided to the Tabs component is invalid. The
Tab with thisvalue("0") is not part of the document layout.
Make sure the tab item is present in the document or that it's not
display: none.
However, this only occurs once in our app after a hard refresh. I have reproduced this in a code sandbox however, it seems that there may be some caching with codesandbox.io that prevents it from happening.
In order to reproduce it in Codesandbox, you will need to add or remove a dependency such as lodash or something from the fork.
https://codesandbox.io/s/sparkling-grass-sfidi?file=/src/TabIssue.jsx
Contributor guide
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 with the linked CodeSandbox and src/TabIssue.jsx, reproducing the warning after a hard refresh and dependency change. Trace the React.lazy tab rendering and identify why the selected Tab is not in the document layout. Done means the reproduction no longer emits the invalid-value warning under the reported conditions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100