Modal not showing inside an each loop in Svelte

64 Views Asked by At

I am working with SvelteKit, Tailwind and DaysiUi.

I have a minimenu, its data is in supabase and its options are read. This menu is located inside another component which is a card and of course I have multiple cards on the same page. The menu looks like this:

Menu.svelte

...
{#each menu as menuItem}
   {#if menu.delete}
        <ModalDelete/>
   {:else}
        <ModalUpdate/>
   {/if}
{/each}
...

ModalDelete.svelte

<script lang="ts">
    let deleteModal:HTMLDialogElement;
</script>

<button class="btn" on:click={() => {deleteModal.showModal()}}>open modal</button>
<dialog bind:this={deleteModal} class="modal">
  <div class="modal-box">
    <form method="dialog">
      <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
    </form>
    <h3 class="font-bold text-lg">Hello!</h3>
    <p class="py-4">Press ESC key or click on ✕ button to close</p>
  </div>
</dialog>

ModalUpdate.svelte

<script lang="ts">
    let updateModal:HTMLDialogElement;
</script>

<button class="btn" on:click={() => {updateModal.showModal()}}>open modal</button>
<dialog bind:this={updateModal} class="modal">
  <div class="modal-box">
    <form method="dialog">
      <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
    </form>
    <h3 class="font-bold text-lg">Hello!</h3>
    <p class="py-4">Press ESC key or click on ✕ button to close</p>
  </div>
</dialog>

If you notice, the menu on each card shows modals that will perform actions (at the moment modals are trivial), the problem is not that, the problem is that if I try to open a modal on a card, it is not shown , the screen locked if I pressed the button but the content of the modal is not displayed, until I press Esc I can interact with the page again.

I tried several things but none of them worked, among them I found that it could be that the same modal is referenced in each card which causes a problem and I tried to pass a unique id to the modals (it is a string) but it didn't work. Can anybody help me?

0

There are 0 best solutions below