How can I actively close a dialog?

[Taiyangqihuo]

I’m using the dialog from Skeleton V4, whose open prop is read-only. I can wrap a button with Dialog.CloseTrigger to let that button close the dialog. But if my button also has a submit function, I can’t find a simple way to close the dialog automatically after the request returns successfully. At the moment I can only simulate an ESC keypress to close it.

[endigo9740]

Hey @Taiyangqihuo, yes this is possible. The simplest strategy for this is to handle the data flow both in/out for the open state. This is possible by combining:

• The open prop (data in)
• The onOpenChange() event (data out)

This can be done like so:

let someDialog = $state(false);

<Dialog open={someDialog} onOpenChange={(e) => (someDialog = e.open)}>...</Dialog>

This pattern is not limited only to the Dialog, but actually the standard across all components. We showcase examples of this for a number of them. Take the Switch for example:

https://www.skeleton.dev/docs/svelte/framework-components/switch

<script lang="ts">
	import { Switch } from '@skeletonlabs/skeleton-svelte';

	let checked = $state(false);
</script>

<div class="flex flex-col items-center gap-4">
	<Switch {checked} onCheckedChange={(details) => (checked = details.checked)}>
		<Switch.Control>
			<Switch.Thumb />
		</Switch.Control>
		<Switch.Label>Label</Switch.Label>
		<Switch.HiddenInput />
	</Switch>
	<p>
		<span class="opacity-60">Checked: </span>
		<code class="code">{checked}</code>
	</p>
</div>

NOTE: the event name may vary based on the context, like on{Context}Changed, such as onCheckedChange here.

As per the reason for this. This is due to the fact Skeleton uses Zag.js under the hood to power all components. As such, they lean into patterns will provide the most uniform API and patterns available cross-framework, such as this.

[Taiyangqihuo]

Thanks for your help👍️