From 71c29bbf3599a93d55667aa5acff1675fd395679 Mon Sep 17 00:00:00 2001
From: Bjorn Lu <34116392+bluwy@users.noreply.github.com>
Date: Sat, 24 Jul 2021 02:18:16 +0800
Subject: [PATCH] [fix] dynamic autofocus (#6494)

---
 src/compiler/compile/render_dom/Block.ts      |  8 ++++++--
 .../render_dom/wrappers/Element/Attribute.ts  |  7 +++++--
 .../render_dom/wrappers/Element/index.ts      |  6 ++++++
 test/runtime/samples/autofocus/_config.js     | 20 +++++++++++++++++--
 test/runtime/samples/autofocus/main.svelte    | 18 +++++++++++++----
 5 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/src/compiler/compile/render_dom/Block.ts b/src/compiler/compile/render_dom/Block.ts
index 63195b610f..cad7e22170 100644
--- a/src/compiler/compile/render_dom/Block.ts
+++ b/src/compiler/compile/render_dom/Block.ts
@@ -71,7 +71,7 @@ export default class Block {
 	get_unique_name: (name: string) => Identifier;
 
 	has_update_method = false;
-	autofocus: string;
+	autofocus?: { element_var: string, condition_expression?: any };
 
 	constructor(options: BlockOptions) {
 		this.parent = options.parent;
@@ -239,7 +239,11 @@ export default class Block {
 		}
 
 		if (this.autofocus) {
-			this.chunks.mount.push(b`${this.autofocus}.focus();`);
+			if (this.autofocus.condition_expression) {
+				this.chunks.mount.push(b`if (${this.autofocus.condition_expression}) ${this.autofocus.element_var}.focus();`);
+			} else {
+				this.chunks.mount.push(b`${this.autofocus.element_var}.focus();`);
+			}
 		}
 
 		this.render_listeners();
diff --git a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
index 179635eb57..c8cc7c8443 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
@@ -169,8 +169,11 @@ export default class AttributeWrapper extends BaseAttributeWrapper {
 		}
 
 		// special case – autofocus. has to be handled in a bit of a weird way
-		if (this.node.is_true && name === 'autofocus') {
-			block.autofocus = element.var;
+		if (name === 'autofocus') {
+			block.autofocus = {
+				element_var: element.var,
+				condition_expression: this.node.is_true ? undefined : value
+			};
 		}
 	}
 
diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 25635ae88c..62c45c093d 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -687,6 +687,12 @@ export default class ElementWrapper extends Wrapper {
 				`);
 			}
 		}
+
+		if (['button', 'input', 'keygen', 'select', 'textarea'].includes(this.node.name)) {
+			block.chunks.mount.push(b`
+				if (${this.var}.autofocus) ${this.var}.focus();
+			`);
+		}
 	}
 
 	add_transitions(
diff --git a/test/runtime/samples/autofocus/_config.js b/test/runtime/samples/autofocus/_config.js
index faf9cf9f48..b0131f8bfe 100644
--- a/test/runtime/samples/autofocus/_config.js
+++ b/test/runtime/samples/autofocus/_config.js
@@ -2,7 +2,23 @@ export default {
 	html: '',
 
 	test({ assert, component, target, window }) {
-		component.visible = true;
-		assert.equal(target.querySelector('input'), window.document.activeElement);
+		component.active = 'default';
+		assert.equal(target.querySelector('input[title="default"]'), window.document.activeElement);
+
+		component.active = 'dynamic-false';
+		assert.notEqual(target.querySelector('input[title="dynamic-false"]'), window.document.activeElement);
+
+		// when dynamically set autofocus to true, don't autofocus
+		component.autofocusFalse = true;
+		assert.notEqual(target.querySelector('input[title="dynamic-false"]'), window.document.activeElement);
+
+		component.active = 'dynamic-true';
+		assert.equal(target.querySelector('input[title="dynamic-true"]'), window.document.activeElement);
+
+		component.active = 'spread';
+		assert.equal(target.querySelector('input[title="spread"]'), window.document.activeElement);
+
+		component.active = 'spread-override';
+		assert.notEqual(target.querySelector('input[title="spread-override"]'), window.document.activeElement);
 	}
 };
diff --git a/test/runtime/samples/autofocus/main.svelte b/test/runtime/samples/autofocus/main.svelte
index 561596e9cf..ecdb1beb5e 100644
--- a/test/runtime/samples/autofocus/main.svelte
+++ b/test/runtime/samples/autofocus/main.svelte
@@ -1,8 +1,18 @@
 <script>
-	export let visible = false;
-	let input;
+	export let active = 'default';
+	export let autofocusFalse = false;
+	export let autofocusTrue = true;
+	let spread = { autofocus: true };
 </script>
 
-{#if visible}
-	<input bind:this={input} autofocus>
+{#if active === 'default'}
+	<input title={active} autofocus />
+{:else if active === 'dynamic-false'}
+	<input title={active} autofocus={autofocusFalse} />
+{:else if active === 'dynamic-true'}
+	<input title={active} autofocus={autofocusTrue} />
+{:else if active === 'spread'}
+	<input title={active} {...spread} />
+{:else if active === 'spread-override'}
+	<input title={active} {...spread} autofocus={false} />
 {/if}
\ No newline at end of file