Repository navigation
docs(react-drawer): use non-modal OverlayDrawer when mounted inside a container - #43
Draft
mainframev wants to merge 1 commit into
Draft
mainframev wants to merge 1 commit into
mainframev wants to merge 1 commit into
Conversation
… container A Drawer rendered into a mountNode only covers that container, so the rest of the page stays interactive. With the default modal type, Tabster traps focus and pulls clicks outside back into the Drawer; when a modal Dialog opened from outside closes, the Drawer is left aria-hidden and unreachable. Use modalType="non-modal" in the story, explain why, and cover the focus behaviour with Cypress tests. Refs microsoft#35389
This branch has not been deployed
This file contains hidden or 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
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.
Previous Behavior
The "Overlay inside container" story renders an
OverlayDrawerinto amountNodewith the defaultmodalType="modal". The Drawer only covers its container, so the rest of the page stays visible and clickable, but Tabster still treats the Drawer as a trapped modal:Dialog, closing the Dialog restores focus to the button, which is outside every modalizer. Tabster's active modalizer becomesundefined, the Drawer staysaria-hidden="true", and every later click into the Drawer is pulled back out. The Drawer stays open but can't be reached.inertTrapFocusbehaves the same way. Reproduced onmasterwith Cypress and the issue's repro.New Behavior
modalType="non-modal"and explains when to choose it: a Drawer inside a container that leaves the rest of the page interactive is not modal.OverlayDrawerin amountNodewithmodalType="non-modal":Dialogopened from outside the container closes, focus can return to the Drawer, and the Drawer isn'taria-hiddenBoth tests fail with
modalType="modal"and pass with"non-modal". Non-modal gives every behavior the issue lists as expected.No change file: only stories and a
.cy.tsxfile change.Not in this PR: Tabster
The unreachable modal Drawer comes from Tabster's
ModalizerAPI._onFocus(tabster 8.8.1, the latest release). When no modalizer is active, a user focus into a trapped modalizer doesn't activate it unless the focus was programmatic, so focus is pulled back out. Activating the focused modalizer whenactiveIdisundefinedfixes the scenario; I checked this with a runtime patch in Cypress. That change belongs inmicrosoft/tabster.Related Issue(s)