#if not disposing child element when going from true => false (occurs intermittently)

[sjafferi]

Description
I'm building an image viewer in svelte and have an issue that's stumped me. Every once in a while, when an {#if} block switches from truthy to falsy, the element inside is not disposed in the html.

This is occurring inside a modal component that sets it's component to null when it closes. Works 90% of the time, but every once in a while, the element stays on the page despite it's condition being falsy.

This is the relevant code:

<script>
...
  const open = (
    NewComponent,
    newProps = {},
    style = { bg: {}, window: {}, content: {} }
  ) => {
    Component = NewComponent;
    props = newProps;
    customStyleBg = style.bg || {};
    customStyleWindow = style.window || {};
    customStyleContent = style.content || {};
  };
  const close = () => {
    Component = null;
    props = null;
    customStyleBg = {};
    customStyleWindow = {};
    customStyleContent = {};
  };
...
</script>
<div>
  {#if Component}
    <div
      class="bg"
      on:click={handleOuterClick}
      bind:this={background}
      transition:transitionBg={transitionBgProps}
      style={cssBg}>
      <div class="window-wrap" bind:this={wrap}>
        <div
          class="window"
          transition:transitionWindow={transitionWindowProps}
          style={cssWindow}>
          <div class="content" style={cssContent}>
            <Component {...props} />
          </div>
        </div>
      </div>
    </div>
  {/if}
  <slot />
</div>

Can be found here: https://github.com/sjafferi/svelte-images/blob/master/src/Images/Modal.svelte#L97

The repo is: https://github.com/sjafferi/svelte-images
Can be run using yarn && yarn dev
Note: bug is intermittent and occurs when opening and closing the image carousel.

Here's a video of the bug: https://streamable.com/2musq
Observe that I'm logging Component on the dom, and you can see that it's null once the bug occurs but the <div class="bg" ...> element is still present on the page. Let me know if you need clarification.

[dimfeld]

Just a guess, but if you use <svelte:component this={Component} {...props} /> instead of <Component {...props} /> does that help?

[Conduitry]

Yeah by design <Component/> is not reactive when Component changes. Use <svelte:component> if you need to swap out different components. There's an issue #4331 about adding a compile time warning about this. Do you still have issues if you change to using that, and if so can you create a minimal standalone REPL demonstrating the issue?

[sjafferi]

Here's a repl using <svelte:component>

https://svelte.dev/repl/ef732af8391246dc878f5b878199aeb1?version=3.18.1

The bug appears if you flip through one end of the carousel to the other and click on the background. Here's an example: https://streamable.com/riew9.

isOpen is false, yet the <svelte:component this={isOpen ? Component : null} ... /> still renders Component

Relevant code: https://github.com/sjafferi/svelte-images/blob/svelte-comp/src/Images/Modal.svelte#L77

[sjafferi]

The issue seemed to go away after cleaning up the component structure.

Relevant commit: sjafferi/svelte-images@64458b5