skeletonlabs
Modal open/close race condition
Current Behavior
I am using a Modal to fetch some user input. The modal calls a custom response callback when the "submit" button is clicked.
Then, in the response callback, I send the data to the API, and await the result. When the API returns an error, I open a new Modal.
However, the new modal gets "closed"/hidden immediately. When I open any new modal, it shows up again, before the one that was "newly requested".
The API introduces a delay - If there is no delay, it works as expected (similar to the "queue multiple" example in the docs).
Expected Behavior
The new modal should open and not get closed.
Steps To Reproduce
No response
Link to Reproduction / Stackblitz
No response
More Information
No response
Here is some example code:
const modal: ModalSettings = {
type: 'component',
title: 'Custom Component',
component: 'CustomComponent',
response: async (r: any) => {
if (r) {
await new Promise(r => setTimeout(r, 20));
showErrorModal(modalStore, "Test");
}
}
};
modalStore.trigger(modal);
Hello, I was looking at this issue.
Something like this works
function nestedModal(): void {
const c: ModalSettings = {
type: 'prompt',
title: 'Enter Name',
body: 'Provide your first name in the field below.',
value: 'Skeleton',
response: async (r: string) => {
if (r) {
await new Promise((r) => setTimeout(r, 20));
modalStore.close();
setTimeout(() => {
showNextModal();
}, 150);
}
}
};
modalStore.trigger(c);
}
Just to chime in here - I would probably recommend a promise or timeout approach like Null is showing to avoid the race condition for now. But the we're taking a very different approach to modals in Skeleton v3. So if this is something you need or want changed for Skeleton v2, I might suggest submitting a PR if you can. Otherwise the suggestion above should hopefully allow you ti bide your time until transitioning to v3.
Just to chime in here - I would probably recommend a promise or timeout approach like Null is showing to avoid the race condition for now. But the we're taking a very different approach to modals in Skeleton v3. So if this is something you need or want changed for Skeleton v2, I might suggest submitting a PR if you can. Otherwise the suggestion above should hopefully allow you ti bide your time until transitioning to v3.
Do you want to updated the v2 documentation for this specific racing condition or in general nested modals?
No, I wouldn't imagine this is a use case that comes up often enough it needs to be documented. But we can obviously keep this thread for reference if the odd support issue does come around. My hope is that once v3 launches, most folks will move to that - especially given that Svelte 4 is a dead end road.