OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Official example Svelte modal component is not closing from parent component in SvelteKit project

  • Thread starter Thread starter Alok
  • Start date Start date
A

Alok

Guest
I have added Modal to my Sveltekit Application from official example given at https://svelte.dev/examples/modal

My Modal.svelte is

Code:
<script>
    export let showModal; // boolean

    let dialog; // HTMLDialogElement

    $: if (dialog && showModal) dialog.showModal();
</script>

<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
<dialog
    bind:this={dialog}
    on:close={() => (showModal = false)}
    on:click|self={() => dialog.close()}
>
    <!-- svelte-ignore a11y-no-static-element-interactions -->
    <div on:click|stopPropagation>
        <button style="float: right; font-weight: bold;" autofocus on:click={() => dialog.close()}>&times;</button>
        <slot name="header" />
        <slot />
    </div>
</dialog>

<style>
    dialog {
        max-width: 32em;
        border-radius: 0.2em;
        border: none;
        padding: 0;
    }
    dialog::backdrop {
        background: rgba(0, 0, 0, 0.3);
    }
    dialog > div {
        padding: 1em;
    }
    dialog[open] {
        animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    @keyframes zoom {
        from {
            transform: scale(0.95);
        }
        to {
            transform: scale(1);
        }
    }
    dialog[open]::backdrop {
        animation: fade 0.2s ease-out;
    }
    @keyframes fade {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    button {
        display: block;
    }
</style>

My App.svelte is

Code:
<script>
    // @ts-nocheck

    import Modal from './Modal.svelte';

    let cancelRequestId;
    let showModal = false;

    function cancleRequest(id) {
        showModal = true;
        cancelRequestId = id;
    }

    async function processCancleRequest() {
        showModal = false
    }
</script>

<div>
    <Modal bind:showModal>
        <h1 slot="header" style="font-weight: bold;">Request Confirmation</h1>
        <hr />
        <p>Are you sure want to proccess request?</p>
        <br />
        <div style="display: flex; justify-content: space-between;">
            <button>No</button>
            <button on:click={processCancleRequest}>Yes</button>
        </div>
    </Modal>
</div>

<button on:click={() => cancleRequest(item.id)}></button>

On clicking Yes button I am setting showModal = false but still Modal is not getting closed.

What I am missing to make it work?

<p>I have added Modal to my <a href="https://kit.svelte.dev/" rel="nofollow noreferrer">Sveltekit</a> Application from official example given at <a href="https://svelte.dev/examples/modal" rel="nofollow noreferrer">https://svelte.dev/examples/modal</a></p>
<p>My <code>Modal.svelte</code> is</p>
<pre class="lang-js prettyprint-override"><code><script>
export let showModal; // boolean

let dialog; // HTMLDialogElement

$: if (dialog && showModal) dialog.showModal();
</script>

<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
<dialog
bind:this={dialog}
on:close={() => (showModal = false)}
on:click|self={() => dialog.close()}
>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:click|stopPropagation>
<button style="float: right; font-weight: bold;" autofocus on:click={() => dialog.close()}>&times;</button>
<slot name="header" />
<slot />
</div>
</dialog>

<style>
dialog {
max-width: 32em;
border-radius: 0.2em;
border: none;
padding: 0;
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.3);
}
dialog > div {
padding: 1em;
}
dialog[open] {
animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes zoom {
from {
transform: scale(0.95);
}
to {
transform: scale(1);
}
}
dialog[open]::backdrop {
animation: fade 0.2s ease-out;
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
button {
display: block;
}
</style>
</code></pre>
<p>My <code>App.svelte</code> is</p>
<pre class="lang-js prettyprint-override"><code><script>
// @ts-nocheck

import Modal from './Modal.svelte';

let cancelRequestId;
let showModal = false;

function cancleRequest(id) {
showModal = true;
cancelRequestId = id;
}

async function processCancleRequest() {
showModal = false
}
</script>

<div>
<Modal bind:showModal>
<h1 slot="header" style="font-weight: bold;">Request Confirmation</h1>
<hr />
<p>Are you sure want to proccess request?</p>
<br />
<div style="display: flex; justify-content: space-between;">
<button>No</button>
<button on:click={processCancleRequest}>Yes</button>
</div>
</Modal>
</div>

<button on:click={() => cancleRequest(item.id)}></button>
</code></pre>
<p>On clicking <code>Yes</code> button I am setting <code>showModal = false</code> but still Modal is not getting closed.</p>
<p>What I am missing to make it work?</p>
 

Latest posts

I
Replies
0
Views
1
impact christian
I
Top