diff --git a/src/lib/components/dialog/dialog.test.ts b/src/lib/components/dialog/dialog.test.ts
index 84f6829c..a658e158 100644
--- a/src/lib/components/dialog/dialog.test.ts
+++ b/src/lib/components/dialog/dialog.test.ts
@@ -27,6 +27,7 @@ import { click, Keys, press } from "$lib/test-utils/interactions";
import Transition from "$lib/components/transitions/TransitionRoot.svelte";
import { tick } from "svelte";
import svelte from "svelte-inline-compile";
+import { writable } from "svelte/store";
let mockId = 0;
jest.mock("../../hooks/use-id", () => {
@@ -134,19 +135,85 @@ describe("Rendering", () => {
it('should be possible to always render the Dialog if we provide it a `static` prop (and enable focus trapping based on `open`)', async () => {
let focusCounter = jest.fn()
- render(
- TestRenderer, {
- allProps: [
- [Button, {}, "Trigger"],
- [Dialog, { open: true, onClose: console.log, static: true }, [
- [P, {}, "Contents"],
- [TestTabSentinel, { onFocus: focusCounter }]
- ]],
- ]
- })
+ render(svelte`
+
+
+ `)
+
+ // Wait for the focus to take effect
+ await tick();
+
+ // Let's verify that the Dialog is already there
+ expect(getDialog()).not.toBe(null)
+ expect(focusCounter).toHaveBeenCalledTimes(1)
+ })
+
+ it('should be possible to always render the Dialog if we provide it a `static` prop (and toggle focus trapping based on `open`)', async () => {
+ let focusCounter = jest.fn()
+ let isOpen = writable(false);
+ render(svelte`
+
+
+ `)
// Wait for the focus to take effect
await tick();
+
+ // Let's verify that the Dialog is already there
+ expect(getDialog()).not.toBe(null)
+ expect(focusCounter).toHaveBeenCalledTimes(0)
+
+ isOpen.set(true);
+ // Wait for the store to trigger rerendering
+ await tick();
+
+ // Wait for the focus to take effect
+ await tick();
+
+ // Let's verify that the Dialog is already there
+ expect(getDialog()).not.toBe(null)
+ expect(focusCounter).toHaveBeenCalledTimes(1)
+ })
+
+ it('should be possible to always render the Dialog if we provide it a `static` prop (and enable focus trapping based on `open` with an if block)', async () => {
+ let focusCounter = jest.fn()
+ let isOpen = writable(false);
+ render(svelte`
+
+
+ `)
+
+ // Wait for the focus to take effect
+ await tick();
+
+ // Let's verify that the Dialog is already there
+ expect(getDialog()).not.toBe(null)
+ expect(focusCounter).toHaveBeenCalledTimes(0)
+
+ isOpen.set(true);
+ // Wait for the store to trigger rerendering
+ await tick();
+
+ // Wait for the focus to take effect
+ await tick();
+
// Let's verify that the Dialog is already there
expect(getDialog()).not.toBe(null)
expect(focusCounter).toHaveBeenCalledTimes(1)
diff --git a/src/lib/components/focus-trap/FocusTrap.svelte b/src/lib/components/focus-trap/FocusTrap.svelte
index c81bc48f..179a30e4 100644
--- a/src/lib/components/focus-trap/FocusTrap.svelte
+++ b/src/lib/components/focus-trap/FocusTrap.svelte
@@ -20,16 +20,12 @@
let previousActiveElement: HTMLElement | null = null;
- let initial = true;
async function handleFocus() {
- if (initial) {
- await tick();
- initial = false;
- }
if (!enabled) return;
if (containers.size !== 1) return;
let { initialFocus } = options;
+ await tick();
let activeElement = document.activeElement as HTMLElement;
if (initialFocus) {