You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In my project I have a menu on/off button. In the menu, you pick a value and the button's visualization updates based on that value. For better UX I've added transitions with the help of #key block. I also need to keep a reference to the button, but eventually it ends up as null.
In the provided reproduction open up your browser developer tools to see console logs of when and to what the reference will change. Initially it (menuToggleButtonRef) will be bound to the button as it should (evident from the console log and the displayed paragraph).
Click the Toggle menu button
Click the Increase value button
Click the Toggle menu button and notice how the reference (value of menuToggleButtonRef) was changed to null
The weirdest part is, if anything, I'd expect the reference to be lost on step 3, when the Toggle button needs to be rerendered due to currentValue change and a #key block referencing it wrapping the button whose reference we're discussing, since due to the transition directive on button, there will be 2 or more buttons (depending how fast you're clicking the Increase value button) in existence while the transitions/animations are running.
No, the reference to the button (menuToggleButtonRef) is set to null when you click on itself (after having changed currentValue) (step 4), which does nothing else but toggle the value of isMenuOpen which shouldn't have to do anything with itself.
To add to the whole confusion, the menuToggleButtonRef appears to regain the reference to the button if you increase the value again.
In short, I'd expect menuToggleButtonRef to never lose reference to the button, but the way it's breaking here, it's doing so exactly the opposite of how I'd imagine.
Describe the bug
In my project I have a menu on/off button. In the menu, you pick a value and the button's visualization updates based on that value. For better UX I've added transitions with the help of #key block. I also need to keep a reference to the button, but eventually it ends up as null.
The weirdest part is, if anything, I'd expect the reference to be lost on step 3, when the Toggle button needs to be rerendered due to currentValue change and a #key block referencing it wrapping the button whose reference we're discussing, since due to the transition directive on button, there will be 2 or more buttons (depending how fast you're clicking the Increase value button) in existence while the transitions/animations are running.
No, the reference to the button (menuToggleButtonRef) is set to null when you click on itself (after having changed currentValue) (step 4), which does nothing else but toggle the value of isMenuOpen which shouldn't have to do anything with itself.
To add to the whole confusion, the menuToggleButtonRef appears to regain the reference to the button if you increase the value again.
In short, I'd expect menuToggleButtonRef to never lose reference to the button, but the way it's breaking here, it's doing so exactly the opposite of how I'd imagine.
Reproduction
https://svelte.dev/repl/4dfcd839402c43bc89f3f92a9c8dc6b0?version=4.2.16
Logs
No response
System Info
Severity
annoyance
The text was updated successfully, but these errors were encountered: