Mask doesn't appear on initial render within transition:slide|local component

[mastoltejr]

Hello,

I'm new to svelte and imask however I'm not sure how to fix this problem. Mainly, when the IMask component enters, the mask doesn't appear until the input is focused, then blur'd, then re-focused.

{#if $form.phoneAlerts}
  <div
    class="[ form__container ]"
    style="padding-top: var(--spacing-3)"
    transition:slide|local
  >
    <div class="field">
      <MaskedInput
        type="tel"
        name="phone"
        id="phone"
        placeholder="Phone Number"
        required
        options={{ mask: '(000) 000-0000', lazy: false }}
        on:change={handleChange}
        bind:value={$form.phone}
      />
      <label for="phone">Phone Number</label>
    </div>
  </div>
{/if}

I've fixed this problem with the following, however it is not a clean solution I think.

<script lang="ts">
import { onMount } from 'svelte';

let phoneFocus;
  onMount(() => {
    phoneFocus = (tag: string) => () => {
      const el = document.querySelector<HTMLInputElement>(tag);
      el.focus();
      el.blur();
    };
  });
</script>

... same code

<div
    class="[ form__container ]"
    style="padding-top: var(--spacing-3)"
    transition:slide|local
    on:introend={phoneFocus('#phone')}
  >

... same code