Closed Neptunium1129 closed 2 months ago
https://svelte.dev/repl/52e0ade6d42546d8892faf8528c70d30?version=3.59.1
https://svelte.dev/repl/52e0ade6d42546d8892faf8528c70d30?version=4.2.18
The issue of duplicate components occurring on button click happens in version 4.2.18 but does not occur in version 3.59.1.
let {
children,
show = null,
id = null,
key = 'simple-modal',
isTabbable = baseIsTabbable,
ariaLabel = null,
ariaLabelledBy = null,
closeButton = true,
closeOnEsc = true,
closeOnOuterClick = true,
styleBg = {},
styleWindow = {},
styleContent = {},
styleCloseButton = {},
styleWindowWrap = {},
classBg = null,
classWindowWrap = null,
classWindow = null,
classContent = null,
classCloseButton = null,
unstyled = false,
setContext = baseSetContext,
transitionBg = fade,
transitionBgProps = { duration: 250 },
transitionWindow = transitionBg,
transitionWindowProps = transitionBgProps,
disableFocusTrap = false
} = $props();
The duplicate component issue is caused by using the fade transition. The issue occurs with a duration of 250, but does not occur with a duration of 120.
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
Temporary Solution: Adding e.target.blur();
-- Usage With a Svelte Store Problem
first click
second click