Add portal prop to Combobox, Listbox, Menu and Popover components
#3124
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This way we can always use `<Portal>`, but enable / disable it conditionally.
This allows us to _not_ provide the ref is no ref was passed in.
moved logic from the `useEffect`, to module scope. We will re-use this logic in a future commit.
Mark all elements on the page as inert, except for the ones that are allowed.
We move up the tree from the allowed elements, and mark all their
siblings as `inert`. If any of the children happens to be a parent of
one of the elements, then that child will not be marked as `inert`.
```
<body> <!-- Stop at body -->
<header></header> <!-- Inert, sibling of parent of allowed element -->
<main> <!-- Not inert, parent of allowed element -->
<div>Sidebar</div> <!-- Inert, sibling of parent of allowed element -->
<div> <!-- Not inert, parent of allowed element -->
<Listbox> <!-- Not inert, parent of allowed element -->
<ListboxButton></ListboxButton> <!-- Not inert, allowed element -->
<ListboxOptions></ListboxOptions> <!-- Not inert, allowed element -->
</Listbox>
</div>
</main>
<footer></footer> <!-- Inert, sibling of parent of allowed element -->
</body>
```
- This adds a `portal` prop that renders the `MenuItems` in a portal.
Defaults to `false`.
- If you pass an `anchor` prop, the `portal` prop will always be set
to `true`.
- The `modal` prop enables the following behavior:
- Scroll locking is enabled when the `modal` prop is passed and the
`Menu` is open.
- Other elements but the `Menu` are marked as `inert`.
…ons`
- This adds a `portal` prop that renders the `ListboxOptions` in a
portal. Defaults to `false`.
- If you pass an `anchor` prop, the `portal` prop will always be set
to `true`.
- The `modal` prop enables the following behavior:
- Scroll locking is enabled when the `modal` prop is passed and the
`Listbox` is open.
- Other elements but the `Listbox` are marked as `inert`.
- This adds a `portal` prop that renders the `ComboboxOptions` in a
portal. Defaults to `false`.
- If you pass an `anchor` prop, the `portal` prop will always be set
to `true`.
- The `modal` prop enables the following behavior:
- Scroll locking is enabled when the `modal` prop is passed and the
`Combobox` is open.
- Other elements but the `Combobox` are marked as `inert`.
- This adds a `portal` prop that renders the `PopoverPanel` in a portal.
Defaults to `false`.
- If you pass an `anchor` prop, the `portal` prop will always be set
to `true`.
- The `modal` prop enables the following behavior:
- Scroll locking is enabled when the `modal` prop is passed and the
`Panel` is open.
This is now implemented on a per component basis with some hooks.
The `Modal` component is removed, so there is no need to handle this in the `Dialog`. It's also safe to remove because the components with "portals" that are rendered inside the `Dialog` are portalled into the `Dialog` and not as a sibling of the `Dialog`.
Before this, we were waiting for a "next render" to mount the portal if it was used inside a specific group. This happens when using `<Portal/>` inside of a `<Dialog/>`.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
RobinMalfait
changed the title
portal prop to Menu, Listbox, Combobox and Popover componentsportal prop to Combobox, Listbox, Menu and Popover components
thecrypticace
approved these changes
Apr 23, 2024
We used to have a `useInertOthers` hook, but it also made everything inside `document.body` inert. This means that third party packages or browser extensions that inject something in the `document.body` were also marked as `inert`. This is something we don't want. We fixed that previously by introducing a simpler `useInert` where we explicitly marked certain elements as inert: #2290 But I believe this new implementation is better, especially with this commit where we stop once we hit `document.body`. This means that we will never mark `body > *` elements as `inert`.
|
@thecrypticace hah we indeed used to have it! But we removed it here: #2290 However, with the last commit (4fdef30), this should not be a problem anymore, and I think I like I will update the places where we use |
| if (!ownerDocument) continue | ||
| d.add(markInert(element)) | ||
| } | ||
| } |
There was a problem hiding this comment.
for (let element of disallowed?.() ?? []) ?
| // Mark the node as inert | ||
| d.add(markInert(node as HTMLElement)) | ||
| } | ||
| for (let element of allowedElements) { |
There was a problem hiding this comment.
ditto here: let allowedElements = allowed?.() ?? [] ?
Will let you remove the extra nesting in both spots.
This way we have a list of allowed and disallowed containers. The `disallowed` elements will be marked as inert as-is. The allowed elements will not be marked as `inert`, but it will mark its children as inert. Then goes op the parent tree and repeats the process.
RobinMalfait
force-pushed
the
feat/portal-prop
branch
from
e1aac1c
to
bf7497e
Compare
thecrypticace
approved these changes
Apr 24, 2024
This was referenced May 28, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR introduces a new
portalprop, and fine-tunes the meaning of themodalprop on the following components:ComboboxcomponentThe
ComboboxOptionscomponent now accepts two new props:portal(boolean, defaults tofalse): Whether to render the options in a portal. This will always be set totrueif ananchorprop is passed.modal(boolean, defaults totrue):inerton other elements, which means you can't interact with other elements on the page while the combobox is open. An outside click typically requires two clicks. The first click will close the combobox, and the second click will interact with the element.ListboxcomponentThe
ListboxOptionscomponent now accepts two new props:portal(boolean, defaults tofalse): Whether to render the options in a portal. This will always be set totrueif ananchorprop is passed.modal(boolean, defaults totrue):inerton other elements, which means you can't interact with other elements on the page while the listbox is open. An outside click typically requires two clicks. The first click will close the listbox, and the second click will interact with the element.MenucomponentThe
MenuItemscomponent now accepts two new props:portal(boolean, defaults tofalse): Whether to render the options in a portal. This will always be set totrueif ananchorprop is passed.modal(boolean, defaults totrue):inerton other elements, which means you can interact with other elements on the page while the menu is open. This also allows you to tab to the next focusable element.PopovercomponentThe
PopoverPanelcomponent now accepts two new props:portal(boolean, defaults tofalse): Whether to render the options in a portal. This will always be set totrueif ananchorprop is passed.modal(boolean, defaults tofalse):inerton other elements, which means you can interact with other elements on the page while the menu is open. This also allows you to tab to the next focusable element.