fix: fixes overlay errors when closing Modal and the page is inaccessible when closed by Overlay with isModal enabled #5359
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
…ng elements with inert When you have some component inside the Modal that is using the Overlay component with inert support when closing the modal it doesn't remove the inert attribute making the page inaccessible.
There are use cases where you can have Overlay components stacked, for example DropDown with ColorPicker, Modal with any other Overlay. If the user clicks outside the overlay it will close all overlays, as well as any other interaction the overlay handles, like pressing esc. This implementation only handle with events if the overlay is the last element of the stack, allowing to have an overlay stacked.
…an Overlay rendered in the modal
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.
Fixes #5332
This PR fixes some Overlay things when interacting with the Modal, there is still the problem that having a component that uses the Overlay inside the Modal pressing esc will still close the Modal because the Modal has not been refactored to use the Overlay component yet #5221.
This PR also adds the possibility of having Overlay stacked which allows avoiding for example closing all overlays at once when pressing esc, clicking outside the overlay or moving the focus to another element. For example, DropDown with ColorPicker, Modal with any other component that uses Overlay, DropDown with cascading when using keyboard navigation.