How to close a modal from a different component?

[multiplehats]

Have set up my modal as described in the documentation. Found myself in a situation where I need to close that particular modal from a component that lives way down the tree and has no access to it whatsoever.

I'm currently doing this (and it works), but I don't think this is the right way to do it. Because pushed is undefined. What am I missing.

<script lang="ts">
	import type WebsiteModal from '$components/website/WebsiteModal.svelte';

	let pushed: ModalPushOutput<WebsiteModal>;

	function closeModal() {
		console.log(pushed);
		modalStore.pop(pushed);
	}
</script>

<button
	type="button"
	on:click={closeModal}
	class="inline-flex items-center p-2 border border-slate-300 bg-red-400  shadow-sm text-sm font-medium rounded-lg text-slate-900 bg-white hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
>
	<span class="sr-only">Return</span>
	<X class="h-5 w-5" aria-hidden="true" />
</button>

[vnphanquang]

@multiplehats hello there, good question. When calling pop(undefined), the topmost modal on the stack will close. If you know that the modal you're trying to pop is always on top, then all is good.

To close a specific modal in the middle of the stack, you need to pass id of the pushed modal:

modalStore.pop({ id: 'some-thing' } as ModalPushOutput<WebsiteModal>);

This id is returned in the ModalPushOutput:

const { id } = modalStore.push(SomeComponent) // id here is generated for you;
// or
const { id } = modalStore.push({ id: 'user-defined-id', component: SomeComponent }); // id here is same as specified

So you basically have to keep this id somewhere after push (svelte context, another store, ...) and use it in pop where needed.

[vnphanquang]

modalStore.onPop(modalPushedId, () => {}) sounds fine to me. I understand, side effect is always the culprit. I'll add this in a patch release shortly. Hang tight

[multiplehats]

Agreed!

Beautiful, thank you very much.

[vnphanquang]

Pending patch release 0.6.1 has added this support. You can find example & docs here (it's basically what we discussed).

Unfortunately seems that npm is down, packages can't be published at the moment: https://status.npmjs.org/. Will update you once it's up @multiplehats

[multiplehats]

Pending patch release 0.6.1 has added this support. You can find example & docs here (it's basically what we discussed).

Unfortunately seems that npm is down, packages can't be published at the moment: https://status.npmjs.org/. Will update you once it's up @multiplehats

Dude this is amazing. Thanks for picking this up so quickly 🚀👏

[vnphanquang]

All good now that npm team has resolved the incident. Let me know if have any further issue.

Ref latest release