!!$store.property problem with transitions not being removed #4620
Description
This took me a while to reproduce and I am not quite sure where the real issue lies but please, take a look.
REPL: https://svelte.dev/repl/b98c363f09c54264b0484a7c51f5f4e2?version=3.20.1
Description:
The important stuff is in the ListWindow.svelte. This window should serve to modify or create new lists in my app, that's why there is an "isEditing" variable defined (if not editing -> new list). This variable gets its value from the global store. That works flawlessly.
There are two transitions in this component, one on the "window div" element (first child node of the (section.form-section) which animates the window popup and the other one on the warning paragraph text which is shown only when the input field has been left empty and the "Add" button clicked.
When I use !!$globalStore.editedList assigning it to the isEditing var, it breaks the animation of the "window div" WHEN/IF the warning paragraph is visible. It doesn't remove the animation from the "window div".
Steps to reproduce:
- Click the Open button
- Click the Add button of the newly created "window" without typing into the input -> red
<p>should appear - Click the Cancel button of the window -> window animates out but it is not removed from the DOM after the animation has completed.
Expected result:
Window is removed from the DOM
Every other scenario works fine:
- Typing text, clicking Add -> OK
- Typing text, clicking Cancel -> OK
- Empty input, clicking Cancel -> OK
- changing
!!$globalStore.editedListtofalsealso solves the problem!
Workaround:
Setting |local remedies this in my example.
If this is some logical problem on my side, advices would be appreciated! Thanks a lot.