mats.bosson/PettyUI
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix Dialog activation and role

Browse Source 
Replace onMount+onCleanup with createEffect watching ctx.isOpen() and
ctx.modal(), so focusTrap/scrollLock/dismiss activate/deactivate
reactively on every open/close — including when forceMount keeps the
component mounted.
Note: role="dialog" was omitted; the project's Biome rules flag it as
redundant (noRedundantRoles) since <dialog> carries the implicit role.
This commit is contained in:
Mats Bosson 2026-03-29 05:49:57 +07:00
parent 69068fbee9
commit 87af246d71
1 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/core/src/components/dialog/dialog-content.tsx
View File

@ -1,6 +1,6 @@
// packages/core/src/components/dialog/dialog-content.tsx
import type { JSX } from "solid-js";
import { Show, onCleanup, onMount, splitProps } from "solid-js";
import { Show, createEffect, onCleanup, splitProps } from "solid-js";
import { createDismiss } from "../../utilities/dismiss/create-dismiss";
import { createFocusTrap } from "../../utilities/focus-trap/create-focus-trap";
import { Portal } from "../../utilities/portal/portal";
@ -42,19 +42,22 @@ export function DialogContent(props: DialogContentProps): JSX.Element {
onDismiss: () => ctx.setOpen(false),
});
onMount(() => {
createEffect(() => {
if (ctx.isOpen() && ctx.modal()) {
focusTrap.activate();
scrollLock.lock();
dismiss.attach();
} else {
focusTrap.deactivate();
scrollLock.unlock();
dismiss.detach();
}
});
onCleanup(() => {
focusTrap.deactivate();
scrollLock.unlock();
dismiss.detach();
});
});
return (
<Show when={local.forceMount || ctx.isOpen()}>