add test, use focusin/focusout rather than focus/blur

Rich-Harris · Rich-Harris · commit 92f8b4642eef · 2024-06-04T09:51:29.000-04:00
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/document.js b/packages/svelte/src/internal/client/dom/elements/bindings/document.js
@@ -1,23 +1,17 @@
-import { render_effect } from '../../../reactivity/effects.js';
+import { listen } from './shared.js';
 
 /**
  * @param {(activeElement: Element | null) => void} update
  * @returns {void}
  */
 export function bind_active_element(update) {
-	var handler = () => {
-		update(document.activeElement);
-	};
-
-	handler();
+	listen(document, ['focusin', 'focusout'], (event) => {
+		if (event && event.type === 'focusout' && /** @type {FocusEvent} */ (event).relatedTarget) {
+			// The tests still pass if we remove this, because of JSDOM limitations, but it is necessary
+			// to avoid temporarily resetting to `document.body`
+			return;
+		}
 
-	document.addEventListener('focus', handler, true);
-	document.addEventListener('blur', handler, true);
-
-	render_effect(() => {
-		return () => {
-			document.removeEventListener('focus', handler);
-			document.removeEventListener('blur', handler);
-		};
+		update(document.activeElement);
 	});
 }
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/shared.js b/packages/svelte/src/internal/client/dom/elements/bindings/shared.js
@@ -6,7 +6,7 @@ import { add_form_reset_listener } from '../misc.js';
  * then listens to the given events until the render effect context is destroyed
  * @param {EventTarget} target
  * @param {Array<string>} events
- * @param {() => void} handler
+ * @param {(event?: Event) => void} handler
  * @param {any} call_handler_immediately
  */
 export function listen(target, events, handler, call_handler_immediately = true) {
diff --git a/packages/svelte/tests/runtime-legacy/samples/document-binding-active/_config.js b/packages/svelte/tests/runtime-legacy/samples/document-binding-active/_config.js
@@ -0,0 +1,16 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+// This test is slightly inaccurate, because blurring elements (or focusing the `<body>` directly)
+// doesn't trigger the relevant `focusin` event in JSDOM.
+export default test({
+	test({ assert, target, logs }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+
+		flushSync(() => btn1.focus());
+		assert.deepEqual(logs, ['...', 'BODY', 'one']);
+
+		flushSync(() => btn2.focus());
+		assert.deepEqual(logs, ['...', 'BODY', 'one', 'two']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/document-binding-active/main.svelte b/packages/svelte/tests/runtime-legacy/samples/document-binding-active/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	let active;
+
+	$: console.log(active?.id || active?.nodeName || '...');
+</script>
+
+<svelte:document bind:activeElement={active} />
+
+<button id="one">one</button>
+<button id="two">two</button>
