Repository: sveltejs/svelte (JavaScript)
Date: 2019-10-06 03:05:50+00:00
Task type: Bug Fix

Issue:
 bind:this used in {#await} does not trigger reaction
**Describe the bug**
From Stackoverflow [https://stackoverflow.com/questions/58228948/how-do-i-trigger-a-reaction-when-bindthis-is-used-in-await-in-svelte]

```
<script>
    import TapHere from './TapHere.svelte';
    let enableButton;
    $: enableButtonRect = enableButton && enableButton.getBoundingClientRect();

    let promise = new Promise((resolve) => {
        setInterval(resolve, 3000);
    });
</script>

{#await promise}
<p>
    waiting...
</p>
{:then}
<div>
  <button bind:this={enableButton}>Enable</button>
  <button>Disable</button>
  <TapHere rect={enableButtonRect}/>
</div>
{/await}
```
The enableButton (and enableButtonRect) should cause TapHere component to react when the promise is resolved.  If the div is not enclosed by {#await} it certainly does happen; but {#await} seems to prevent the reaction.

**To Reproduce**

https://svelte.dev/repl/4e0e477d6a394a83a2d79b3d1fa50525?version=3.12.1
A green "Tap Here!" message should be shown.




Issue discussion:

Solution patch:
diff --git a/src/runtime/internal/await_block.ts b/src/runtime/internal/await_block.ts
--- a/src/runtime/internal/await_block.ts
+++ b/src/runtime/internal/await_block.ts
@@ -14,6 +14,8 @@ export function handle_promise(promise, info) {
 		const child_ctx = assign(assign({}, info.ctx), info.resolved);
 		const block = type && (info.current = type)(child_ctx);
 
+		let needs_flush = false;
+
 		if (info.block) {
 			if (info.blocks) {
 				info.blocks.forEach((block, i) => {
@@ -33,11 +35,15 @@ export function handle_promise(promise, info) {
 			transition_in(block, 1);
 			block.m(info.mount(), info.anchor);
 
-			flush();
+			needs_flush = true;
 		}
 
 		info.block = block;
 		if (info.blocks) info.blocks[index] = block;
+
+		if (needs_flush) {
+			flush();
+		}
 	}
 
 	if (is_promise(promise)) {


Test patch:
diff --git a/test/runtime/samples/await-set-simultaneous-reactive/_config.js b/test/runtime/samples/await-set-simultaneous-reactive/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/await-set-simultaneous-reactive/_config.js
@@ -0,0 +1,13 @@
+export default {
+	html: `<p>wait for it...</p>`,
+	test({ assert, component, target }) {
+
+		return component.promise
+			.then(() => {
+				assert.htmlEqual(target.innerHTML, `
+					<p>the answer is 42!</p>
+					<p>the answer100 is 4200!</p>
+				`);
+			});
+	}
+};
\ No newline at end of file
diff --git a/test/runtime/samples/await-set-simultaneous-reactive/main.svelte b/test/runtime/samples/await-set-simultaneous-reactive/main.svelte
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/await-set-simultaneous-reactive/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	let answer = 0;
+	$: answer100 = answer * 100;
+	export let promise = new Promise(resolve => {
+		setTimeout(() => {
+			resolve();
+			answer = 42;
+		}, 0)
+	});
+</script>
+
+{#if promise}
+	{#await promise}
+		<p>wait for it...</p>
+	{:then _}
+		<p>the answer is {answer}!</p>
+		<p>the answer100 is {answer100}!</p>
+	{:catch error}
+		<p>well that's odd</p>
+	{/await}
+{/if}
\ No newline at end of file