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?