fix(4995): dynamically set autofocus

src/compiler/compile/render_dom/wrappers/Element/Attribute.ts

@@ -164,7 +164,7 @@ export default class AttributeWrapper {
 		}
 
 		// special case – autofocus. has to be handled in a bit of a weird way
-		if (this.node.is_true && name === 'autofocus') {
+		if (name === 'autofocus') {
 			block.autofocus = element.var;
 		}
 
@@ -350,4 +350,4 @@ const boolean_attribute = new Set([
 	'required',
 	'reversed',
 	'selected'
-]);
+]);

test/runtime/samples/autofocus/_config.js

@@ -1,8 +1,24 @@
 export default {
 	html: '',
 
-	test({ assert, component, target, window }) {
+	async test({ assert, component, target, window }) {
 		component.visible = true;
-		assert.equal(target.querySelector('input'), window.document.activeElement);
+		const input = target.querySelector('input');
+		async function dispatchEvent(value) {
+			input.value = value;
+			const inputEvent = new window.InputEvent("input");
+			await input.dispatchEvent(inputEvent);
+		}
+
+		assert.equal(window.document.activeElement.getAttribute('title'), 'text');
+
+		await dispatchEvent('dynamic');
+		assert.equal(window.document.activeElement.getAttribute('title'), 'dynamic');
+
+		await dispatchEvent('bound');
+		assert.equal(window.document.activeElement.getAttribute('title'), 'bound');
+
+		await dispatchEvent('fn');
+		assert.equal(window.document.activeElement.getAttribute('title'), 'fn');
 	}
 };

test/runtime/samples/autofocus/main.svelte

@@ -1,8 +1,16 @@
 <script>
-	export let visible = false;
-	let input;
+	let autofocus = true;
+	let active = "text";
 </script>
 
-{#if visible}
-	<input bind:this={input} autofocus>
-{/if}
+<input title="input" bind:value={active} />
+
+{#if active === "text"}
+	<input title={active} autofocus />
+{:else if active === "dynamic"}
+	<input title={active} {autofocus} />
+{:else if active === "bound"}
+	<input title={active} autofocus={autofocus} />
+{:else if active === "fn"}
+	<input title={active} autofocus={() => true} />
+{/if}