Svelte5 migration #114
Description
I am attempting to migrate this modal source because it is a Svelte modal, which is the most stable and functional.
The modal open function is working.
However, the "store bind" has failed, and clicking behind the modal causes the component to duplicate and mount again.
-- behind click focus duplicate mount component
<script>
const etcModuleHistListModal = writable(null);
const etcModuleHistListBtn = () => {
etcModuleHistListModal.set(bind(ModalContent,
{
title: "BIND TITLE"
}
)
)
};
</script>
<p><button onclick={(e)=>{
etcModuleHistListBtn()
}
}>BIND_BTN</button></p>
- Autofocus button issue and spacebar click cause the component to regenerate and append to the modal area.
Temporary Solution:
Adding e.target.blur();
<p><button onclick={(e)=>{
e.target.blur();
cmmModalBtn();
}
}>CUSTOM_CMM</button></p>
-- Usage With a Svelte Store
Problem
- OnMount changed $effect, then isMounted is set to true.
- Reactivity issue: Component duplicate bind,
- I thought OnMount and reactivity ($:) changed $effect.
- first click
- second click
isMounted = $state(false);
$effect(()=>{
isMounted = true;
if (isMounted) {
if (isFunction(show)) {
open(show);
} else {
close();
}
}
return () => {
if (isMounted) close();
}
});
<!-- App.svelte -->
<script>
import { writable } from 'svelte/store';
import Modal, { bind } from 'svelte-simple-modal';
import Popup from './Popup.svelte';
const modal = writable(null);
const showModal = () => modal.set(bind(Popup, { message: "It's a modal!" }));
</script>
<Modal show={$modal}>
<button on:click={showModal}>Show modal</button>
</Modal>