[core] The hidden prop does not always visually hide elements

Open
#20,452 16 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

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

Research direction

Start with the linked CodeSandbox reproduction and compare Container's hidden prop behavior between Material-UI v4.9.1 and v4.9.9. Confirm the reported visibility difference with tabIndex set to 1, then check the Container implementation and its existing tests; done means the reproduction hides the inactive content as expected.

Written by the indexing model from the issue text.

Description

scope: all components type: bug

Im using the hidden prop of Container to show only the current Tab and to hide the rest (copied from the Tabs example)
was working fine until i upgraded to version 4.9.9 from version 4.9.1 (could be higher version but i think 4.9.1)

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

<Container hidden={tabIndex != 1}> </Container>

The Container is not hidden even though tabIndex = 1

Expected Behavior 🤔

Container should not be visible

Steps to Reproduce 🕹

<Container hidden={tabIndex != 1}>sdfsdfsdfds</Container>

https://codesandbox.io/s/empty-browser-n8fwh?fontsize=14&hidenavigation=1&theme=dark

  • Works on 4.9.1 *

Steps:

  1. upgrade to version 4.9.9
  2. use a Container with hidden prop as True
Tech Version
Material-UI v4.9.9
React v16.12.0
Chrome
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Contributor guide

Open the contributing guide

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 mui/material-ui

All issues in mui/material-ui

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.