[posthog-eu]

Problem

• One 9k.school learner on iOS Safari got an uncaught InvalidStateError ("Element is not connected") when they moved to the next lesson. The user saw nothing break. The cost is noise in error tracking.
• show() runs after nextTick, from the open watcher and from the re-show in onNativeClose. If a route change removes the <dialog> first, the template ref still points at the old element, and showModal() throws.

Changes

• show() returns early when the dialog is not connected to the document.
• The native-dialog test stand-in for showModal() now throws on a disconnected element, the same as a browser does.
• A new test detaches the dialog, then opens the modal. Without the guard, this test fails with InvalidStateError.

Risk

• Low. A disconnected dialog cannot show, so the guard only stops a call that always throws.
• The modal does not show again by itself if the same <dialog> element is attached again later. No current flow does this, so this PR does not add onActivated handling.

Verification

Check	Result
npm test (full suite)	pass
New test without the guard	fails with InvalidStateError
npm run format:check	pass
npm run lint	pass
npm run typecheck	pass
Library / Storybook / showcase builds	not run

Follow-up

• Update @9klabs/design in the 9k.school learner app after this merges.

Agent context

• The inbox report was filed against the9klabs/promptdump, but promptdump does not use @9klabs/design. The fix belongs in this repository, so the PR is here.
• The exact modal and route in the learner app are not confirmed, because its /_nuxt/ chunk has no source maps.

---

🤖 Generated with Claude Code

Created with PostHog Desktop from this inbox report.

[ismail9k]

Reviewed with Codex (code pass), checked against the code.

Findings: 0 Critical, 0 Important, 0 Minor.

Intent pass: skipped — the PR links no intent issue (no Closes # / Relates to #). Checked against the PR description instead: the guard and test do what it says.

Merge note — this branch conflicts with main. Since this branch was cut, main landed f259e60 (fix: never show I9kModal's dialog again once it unmounts), which fixes the same InvalidStateError for the route-change / <Suspense> unmount race with an unmounting flag in show() and onNativeClose(). The isConnected guard still adds value on top of it: it covers a dialog that leaves the document while the component stays mounted (a detached subtree, a <KeepAlive>-cached page getting an open update), where unmounting stays false. Resolve the conflict by keeping both checks:

if (unmounting || !element || !element.isConnected || isShown(element)) return;

main's showModal stand-in in tests/I9kModal.test.ts already throws on a disconnected element, so this PR's change to that mock is redundant — keep main's and add only the new test.

[ismail9k]

Answering #39 (review):

1. Merge conflict with main — fixed in 03830f5. origin/main is merged in, and show() now keeps both guards: if (unmounting || !element || !element.isConnected || isShown(element)) return;. Its comment now names the case isConnected alone covers: a dialog that leaves the document while the modal stays mounted. The showModal stand-in in the test is main's, which already throws on a disconnected element. This branch's new test sits next to main's <Suspense> regression test.

Verified on 03830f5: npm test (1122 passed), npm run format:check, npm run lint, npm run typecheck all pass.