Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bind:this used in {#await} does not trigger reaction #3660

Closed
yoshikiohshima opened this issue Oct 4, 2019 · 0 comments · Fixed by #3663
Closed

bind:this used in {#await} does not trigger reaction #3660

yoshikiohshima opened this issue Oct 4, 2019 · 0 comments · Fixed by #3663

Comments

@yoshikiohshima
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant