The menu changes position when a containing component is removed, showing a very unpleasant flicker instead of a nice fade-out.
Steps to reproduce
Create a dynamic element,
Create a menu inside the element,
Create menu action that removes the dynamic element,
Click the action,
Observe the menu jumping to the corner of some wrapping element while it fades out.
In version 0.8.1 there is no such problem. It seems that in 0.8.1 the menu would just immediately disappear (no fade-out), so whether position is messed up or not doesn't matter.
(see examples for both behaviors below)
Which browser?
Browser: Chrome 83.0.4103.106 (latest), on Kubuntu 19.10 (Linux)
Vue version: 2.6.11
Vue Material version: 1.0.0-beta-14
What is expected?
The menu fades out in the same place it first appeared.
What is actually happening?
The menu rapidly changes position when the parent component is removed.
Reproduction Link
Try removing the elements using the menu on the right.
Works as expected, but removes the fade-out completely. Must be added to un-scoped style tag.
Note: I tried using just .md-menu-content-leave-to at first, but it left one frame with the misplaced menu in my real-life example.
Adding a transition on the element (didn't work!)
I assumed that adding a transition on the element would help (because then it's not immediately removed from the DOM), but for some reason it has no effect on the menu position.
The menu changes position when a containing component is removed, showing a very unpleasant flicker instead of a nice fade-out.
Steps to reproduce
In version 0.8.1 there is no such problem. It seems that in 0.8.1 the menu would just immediately disappear (no fade-out), so whether position is messed up or not doesn't matter.
(see examples for both behaviors below)
Which browser?
What is expected?
The menu fades out in the same place it first appeared.
What is actually happening?
The menu rapidly changes position when the parent component is removed.
Reproduction Link
Try removing the elements using the menu on the right.
v1.0.0 Example (bug repro)
v0.8.1 example (how it used to work)
Work-arounds that I tried
Making the menu disappear immediately (somewhat works)
Works as expected, but removes the fade-out completely. Must be added to un-scoped style tag.
Note: I tried using just
.md-menu-content-leave-to
at first, but it left one frame with the misplaced menu in my real-life example.Adding a transition on the element (didn't work!)
I assumed that adding a transition on the element would help (because then it's not immediately removed from the DOM), but for some reason it has no effect on the menu position.