Skip to content

Mounting conditions of a hiding element (dialog, tabs...) should be mentioned #2086

Description

@soleuniverse101

Change Type

Addition

Proposed Changes

I think that docs about elements that can be hidden (such as Dialog, Tabs, DropDownMenu...) should have a section mentioning how the hiding is done.

What led me to this was the following example : Dialog is hidden by mounting/unmounting its content from the DOM, whereas Tabs has all its tabs mounted but only one showing with the others having the hidden HTML attribute. This can be confusing when trying to reason about the state of components/values used inside Tabs.Content or similar content components. In my case, I'm using Dialog for something and I was under the impression that the state stored inside its components would not be lost when closing the dialog, but it was. My assumption was based on the fact that I faced a similar situation with Tabs, whose state was saved when switching tabs.

I should also mention that the forceMount prop is documented on Dialog but when used, suddenly display/hiding of the dialog must be managed by the user. What I'm suggesting is simply that since two different behaviors can be used to hide elements (either unmounting from the DOM or hiding with HTML/CSS), which one is used for a particular elements should be mentioned in its documentation page.

Metadata

Metadata

Assignees

No one assigned

    Labels

    triageA maintainer needs to review this issue and label it appropriately

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions