Modals get no backdrop when first constructed with isOpen={true}

[jtlapp]

I'm writing a desktop app using Electron. If the app is not configured when it is first opened, I show a modal with a dialog for providing the configuration. The app therefore first opens with this modal open.

Unfortunately, it seems that in order to get the backdrop for a modal, a page must first render without the modal open. My workaround it to set a timer for opening the modal after a second.

It's easy to recreate this issue by hardcoding a modal with isOpen={true}.

UPDATE #1: Including the following code in my component corrects the problem:

  <Portal>
    <ModalBackdrop {isOpen} {fade} />
  </Portal>

UPDATE #2: The above workaround causes two modal backdrops to appear on modals that aren't initially shown (making the backdrop extra dark), so I had to solve the problem as follows:

  let isOpen = false;

  onMount(async () => {
    await tick();
    isOpen = true;
  });

[bestguy]

Oh! Thanks for the heads up @jtlapp . Will take a look at best fix, that should just work.

[jtlapp]

I ended up having additional problems related to the modal tracking whether it is open, which I resolved by implementing modals myself and having the visibility of the modal be a function of its inclusion in the container, rather than a function of the value of a variable. I don't remember the additional conflicts at this point, but having a component track whether it is visible seems to be at odds with how Svelte is designed to work, where components render upon conditional inclusion.

[bestguy]

Released in v5.7.0 thanks for the heads up 👍