- 
          
 - 
                Notifications
    
You must be signed in to change notification settings  - Fork 4.7k
 
Open
Description
Describe the bug
The parent's $effect runs before its $effect.pre, when the child component inserts a new input and shifts focus, which triggers expanded change in the parent.
<script>
  let expanded = $state(false);
  $effect(() => {
    expanded;
    console.log("run effect", expanded);
  });
  $effect.pre(() => {
    expanded;
    console.log("run pre-effect", expanded);
  });
  let inputBar;
  $effect(() => {
    if (expanded && inputBar) setTimeout(() => inputBar.focus(), 400);
  });
  import Component from "./Component.svelte";
</script>
{#if expanded}
  <input
    bind:this={inputBar}
    onblur={() => (expanded = false)}
    placeholder="input"
  />
  <Component></Component>
{:else}
  <button onclick={() => (expanded = true)}>expand</button>
{/if}Component.svelte
<script>
  let showAnother = $state(false);
  let anotherInput;
  $effect(() => {
    if (showAnother && anotherInput) anotherInput.focus();
  });
</script>
<button
  onmousedown={
    (e) => e.preventDefault()
  } 
  onclick={() => showAnother = true}> show another input and switch focus
</button>
{#if showAnother}
  <input bind:this={anotherInput} placeholder="another input" />
{/if}Reproduction
https://svelte.dev/playground/c60f01e426f642f7a06629fc0fbf6e22?version=5.34.8
Logs
System Info
playgroundSeverity
annoyance
Metadata
Metadata
Assignees
Labels
No labels