ModalStore.trigger from within response - puts in strange state

[ktarmyshov]

Current Behavior

Hi, I am using skeleton modals for the app dev. I have a confirmation message shown and then error message triggered from within “response”. The message is not shown, but when the next modal is triggered - then this one is shown first.

Expected Behavior

Modal confirmation is shown.

Steps To Reproduce

Show confirmation modal
Trigger another (maybe custom modal) from within response.
Trigger another one outside of response

Link to Reproduction / Stackblitz

No response

More Information

No response

[endigo9740]

@ktarmyshov given this sounds like a very specific series of steps, would you mind creating a minimal reproduction of this? It might be helpful for troubleshooting this.

[ktarmyshov]

Hi, Chris, below is the code. This appears only if there is a small delay (not too short and not too long) - I added a workaround for myself show modal error after 200ms delay - then it works. I suppose this might be linked to animations of disappearing - just a guess.

<script lang="ts">
	import type { ModalSettings } from '@skeletonlabs/skeleton';
	import { getModalStore } from '@skeletonlabs/skeleton';

	function delay(ms: number) {
		return new Promise((resolve) => setTimeout(resolve, ms));
	}

	const modalStore = getModalStore();

	const modal: ModalSettings = {
		type: 'confirm',
		// Data
		title: 'Please Confirm',
		body: 'Are you sure you wish to proceed?',
		// TRUE if confirm pressed, FALSE if cancel pressed
		response: async (r: boolean) => {
			// Some action is happening...
			await delay(100);
			// Error occurred
			const modalError: ModalSettings = {
				type: 'alert',
				// Data
				title: 'Error title',
				body: 'Error Body'
			};

			modalStore.trigger(modalError);
		}
	};

	function handleSubmit() {
		modalStore.trigger(modal);
	}
</script>

<form method="post" on:submit|preventDefault={handleSubmit}>
	<!-- <input type="text" /> -->
	<button>Action button</button>
</form>

[Pertempto]

I also encountered the same bug.

[Pertempto]

@ktarmyshov thanks for the delay workaround! It's not ideal, but it at least acts as a temporary way to get my dialogs to show up when I need them to.