Skip to content

Commit

Permalink
Ensure the main tree and parent Dialog components are marked as `in…
Browse files Browse the repository at this point in the history
…ert` (#2290)

* drop `@ts-expect-error`, because `inert` is available now

* fix logical error

We want to apply `inert` when we _don't_ have nested dialogs, because if
we _do_ have nested dialogs, then the inert should be applied from the
nested dialog (or visually the top most dialog).

* update changelog

* replace `useInertOthers` with `useInert`

* add `assertInert` and `assertNotInert` accessibility assertion helpers

* ensure the `main tree` root is marked as inert

As well as the parent dialogs in case of nested dialogs.
  • Loading branch information
RobinMalfait authored Feb 17, 2023
1 parent 619d103 commit 10efaa9
Show file tree
Hide file tree
Showing 14 changed files with 560 additions and 869 deletions.
4 changes: 3 additions & 1 deletion packages/@headlessui-react/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

## [Unreleased]

- Nothing yet!
### Fixed

- Ensure the main tree and parent `Dialog` components are marked as `inert` ([#2290](https://github.com/tailwindlabs/headlessui/pull/2290))

## [1.7.11] - 2023-02-15

Expand Down
29 changes: 26 additions & 3 deletions packages/@headlessui-react/src/components/dialog/dialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import React, {
createContext,
createRef,
useCallback,
useContext,
useEffect,
useMemo,
Expand All @@ -25,7 +26,6 @@ import { Keys } from '../keyboard'
import { isDisabledReactIssue7711 } from '../../utils/bugs'
import { useId } from '../../hooks/use-id'
import { FocusTrap } from '../../components/focus-trap/focus-trap'
import { useInertOthers } from '../../hooks/use-inert-others'
import { Portal } from '../../components/portal/portal'
import { ForcePortalRoot } from '../../internal/portal-force-root'
import { Description, useDescriptions } from '../description/description'
Expand All @@ -38,6 +38,7 @@ import { useEventListener } from '../../hooks/use-event-listener'
import { Hidden, Features as HiddenFeatures } from '../../internal/hidden'
import { useEvent } from '../../hooks/use-event'
import { useDocumentOverflowLockedEffect } from '../../hooks/document-overflow/use-document-overflow'
import { useInert } from '../../hooks/use-inert'

enum DialogStates {
Open,
Expand Down Expand Up @@ -216,11 +217,33 @@ let DialogRoot = forwardRefWithAs(function Dialog<

// Ensure other elements can't be interacted with
let inertOthersEnabled = (() => {
if (!hasNestedDialogs) return false
// Nested dialogs should not modify the `inert` property, only the root one should.
if (hasParentDialog) return false
if (isClosing) return false
return enabled
})()
useInertOthers(internalDialogRef, inertOthersEnabled)
let resolveRootOfMainTreeNode = useCallback(() => {
return (Array.from(ownerDocument?.querySelectorAll('body > *') ?? []).find((root) => {
// Skip the portal root, we don't want to make that one inert
if (root.id === 'headlessui-portal-root') return false

// Find the root of the main tree node
return root.contains(mainTreeNode.current) && root instanceof HTMLElement
}) ?? null) as HTMLElement | null
}, [mainTreeNode])
useInert(resolveRootOfMainTreeNode, inertOthersEnabled)

// This would mark the parent dialogs as inert
let inertParentDialogs = (() => {
if (hasNestedDialogs) return true
return enabled
})()
let resolveRootOfParentDialog = useCallback(() => {
return (Array.from(ownerDocument?.querySelectorAll('[data-headlessui-portal]') ?? []).find(
(root) => root.contains(mainTreeNode.current) && root instanceof HTMLElement
) ?? null) as HTMLElement | null
}, [mainTreeNode])
useInert(resolveRootOfParentDialog, inertParentDialogs)

let resolveContainers = useEvent(() => {
// Third party roots
Expand Down
295 changes: 0 additions & 295 deletions packages/@headlessui-react/src/hooks/use-inert-others.test.tsx

This file was deleted.

Loading

0 comments on commit 10efaa9

Please sign in to comment.