fix: ensure proper editor focus management (sveltejs#202)

Also adds tests for focus management

Author: tomoam

content/tutorial/common/src/__client.js

@@ -63,13 +63,34 @@ window.addEventListener('message', async (e) => {
 	}
 });
 
-window.addEventListener('pointerdown', () => {
-	parent.postMessage(
-		{
-			type: 'pointerdown'
-		},
-		'*'
-	);
+/**
+ * The iframe sometimes takes focus control in ways we can't prevent
+ * while the editor is focussed. Refocus the editor in these cases.
+ */
+window.addEventListener('focusin', (e) => {
+	/**
+	 * This condition would only be `true` if the iframe took focus when loaded,
+	 * and `false` in other cases, for example:
+	 * - navigation inside the iframe - for example, if you click a link inside
+	 *   the iframe, the `focusin` event will be fired twice, the first time
+	 *   `e.target` will be its anchor, the second time `e.target` will be body,
+	 *   and `e.relatedTarget` will be its anchor (if `csr = false` in only the
+	 *   first `focusin` event will be fired)
+	 * - an element such as input gets focus (either from inside or outside the
+	 *   iframe) - for example, if an input inside the iframe gets focus,
+	 *   `e.target` will be the input.
+	 */
+	if (
+		e.target.tagName === 'BODY' &&
+		!e.target.contains(e.relatedTarget)
+	) {
+		parent.postMessage(
+			{
+				type: 'iframe_took_focus'
+			},
+			'*'
+		);
+	}
 });
 
 function ping() {

package.json

@@ -5,12 +5,14 @@
 		"dev": "vite dev",
 		"build": "node scripts/create-common-bundle && vite build",
 		"preview": "vite preview",
+		"test": "playwright test",
 		"check": "svelte-check --tsconfig ./jsconfig.json",
 		"check:watch": "svelte-check --tsconfig ./jsconfig.json --watch",
 		"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. .",
 		"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
 	},
 	"devDependencies": {
+		"@playwright/test": "^1.30.0",
 		"@sveltejs/adapter-auto": "1.0.0-next.90",
 		"@sveltejs/adapter-vercel": "1.0.0-next.85",
 		"@sveltejs/kit": "next",

playwright.config.ts

@@ -0,0 +1,10 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+	webServer: {
+		command: 'pnpm build && pnpm preview',
+		port: 4173
+	}
+};
+
+export default config;

pnpm-lock.yaml

@@ -31,6 +31,8 @@
 	let h = 0;
 
 	let preserve_editor_focus = false;
+	/** @type {any} */
+	let remove_focus_timeout;
 
 	onMount(() => {
 		let destroyed = false;
@@ -237,8 +239,8 @@
 		}
 	}}
 	on:message={(e) => {
-		if (e.data.type === 'pointerdown') {
-			preserve_editor_focus = false;
+		if (preserve_editor_focus && e.data.type === 'iframe_took_focus') {
+			instance?.editor.focus();
 		}
 	}}
 />
@@ -256,15 +258,16 @@
 			}
 		}}
 		on:focusin={() => {
+			clearTimeout(remove_focus_timeout);
 			preserve_editor_focus = true;
 		}}
-		on:focusout={() => {
-			// Little timeout, because inner postMessage event might take a little
-			setTimeout(() => {
-				if (preserve_editor_focus) {
-					instance?.editor.focus();
-				}
-			}, 100);
+		on:focusout={(e) => {
+			// Heuristic: user did refocus themmselves if iframe_took_focus
+			// doesn't happen in the next few miliseconds. Needed
+			// because else navigations inside the iframe refocus the editor.
+			remove_focus_timeout = setTimeout(() => {
+				preserve_editor_focus = false;
+			}, 200);
 		}}
 	/>
 </div>

src/routes/tutorial/[slug]/Editor.svelte

@@ -0,0 +1,130 @@
+import { expect, test, chromium } from '@playwright/test';
+
+const chromium_flags = ['--enable-features=SharedArrayBuffer'];
+
+const editor_selector = 'div.monaco-scrollable-element.editor-scrollable';
+const editor_focus_selector = 'textarea.inputarea.monaco-mouse-cursor-text';
+const iframe_selector = 'iframe[src*="webcontainer.io/"]';
+
+test('focus management: the editor keeps focus when iframe is loaded', async () => {
+	const context = await chromium.launchPersistentContext('', { args: chromium_flags });
+	const page = context.pages()[0];
+	await page.bringToFront();
+
+	await page.goto('/tutorial/your-first-component');
+
+	// first, focus the editor before the iframe is loaded
+	await page.locator(editor_selector).click({ delay: 1000 });
+
+	// at this time, expect focus to be on the editor
+	await expect(page.locator(editor_focus_selector)).toBeFocused();
+
+	// wait for the iframe to load
+	await page.frameLocator(iframe_selector).getByText('Hello world!').waitFor();
+
+	// wait a little, because there may be a script that manipulates focus
+	await page.waitForTimeout(1000);
+
+	// expect focus to be on the editor
+	await expect(page.locator(editor_focus_selector)).toBeFocused();
+
+	await context.close();
+});
+
+test('focus management: input inside the iframe gets focus when clicking it', async () => {
+	const context = await chromium.launchPersistentContext('', { args: chromium_flags });
+	const page = context.pages()[0];
+	await page.bringToFront();
+
+	await page.goto('/tutorial/named-form-actions');
+
+	const iframe = page.frameLocator(iframe_selector);
+
+	// wait for the iframe to load
+	await iframe.getByText('todos').waitFor();
+
+	// first, focus the editor
+	await page.locator(editor_selector).click({ delay: 1000 });
+	await expect(page.locator(editor_focus_selector)).toBeFocused();
+
+	// then, click a input in the iframe
+	const input = iframe.locator('input[name="description"]');
+	await input.click({ delay: 500 });
+
+	// wait a little, because there may be a script that manipulates focus
+	await page.waitForTimeout(1000);
+
+	// expect focus to be on the input in the iframe, not the editor.
+	await expect(input).toBeFocused();
+	await expect(page.locator(editor_focus_selector)).not.toBeFocused();
+
+	await context.close();
+});
+
+test('focus management: body inside the iframe gets focus when clicking a link inside the iframe', async () => {
+	const context = await chromium.launchPersistentContext('', { args: chromium_flags });
+	const page = context.pages()[0];
+	await page.bringToFront();
+
+	await page.goto('/tutorial/layouts');
+
+	const iframe = page.frameLocator(iframe_selector);
+
+	// wait for the iframe to load
+	await iframe.getByText('this is the home page.').waitFor();
+
+	// first, focus the editor
+	await page.locator(editor_selector).click({ delay: 1000 });
+	await expect(page.locator(editor_focus_selector)).toBeFocused();
+
+	// then, click a link in the iframe
+	await iframe.locator('a[href="/about"]').click({ delay: 500 });
+
+	// wait for navigation
+	await iframe.getByText('this is the about page.').waitFor();
+
+	// wait a little, because there may be a script that manipulates focus
+	await page.waitForTimeout(1000);
+
+	// expect focus to be on body in the iframe, not the editor.
+	await expect(iframe.locator('body')).toBeFocused();
+
+	await context.close();
+});
+
+test('focus management: the editor keeps focus while typing', async () => {
+	const context = await chromium.launchPersistentContext('', { args: chromium_flags });
+	const page = context.pages()[0];
+	await page.bringToFront();
+
+	await page.goto('/tutorial/your-first-component');
+
+	// wait for the iframe to load
+	await page.frameLocator(iframe_selector).getByText('Hello world!').waitFor();
+
+	// first, write script tag
+	const code = '<script>\n\n</script>\n';
+	await page.locator(editor_focus_selector).fill(code);
+
+	// move the cursor into the script tag
+	await page.keyboard.press('PageUp', { delay: 500 });
+	await page.keyboard.press('ArrowDown', { delay: 500 });
+
+	// wait a little because the above operation is flaky
+	await page.waitForTimeout(500);
+
+	// type the code as a person would do it manually
+	await page.keyboard.type(`	export let data;`, { delay: 100 });
+
+	// wait a little, because there may be a script that manipulates focus
+	await page.waitForTimeout(1000);
+
+	// get code from DOM, then replace nbsp with normal space
+	const received = (await page.locator(editor_selector).innerText()).replace(/\u00a0/g, ' ');
+
+	const expected = '<script>\n  export let data;\n</script>\n<h1>Hello world!</h1>';
+
+	expect(received).toBe(expected);
+
+	await context.close();
+});