Combining dropdown, menu and triggering a drawer causes a weird show animation

[nomve]

Describe the bug

Drawer exhibits an unusual animation when triggered from an element inside Dropdown.

To Reproduce

Steps to reproduce the behavior:

1. create a structure similar to this (there's also a link to the demo with the exact setup)

<sl-dropdown>
  <sl-menu>
    <sl-menu-item></sl-menu-item>
  </sl-menu>
</sl-dropdown>

2. have the menu-item open an <sl-drawer>
3. observe the drawer open animation
4. it will open with a strange bounce

Demo

https://codepen.io/nomve-the-encoder/pen/LYoLoOb

Browser / OS

• my guess all browsers and OS
• reproduced on Chrome+Safari (macos) and iOS

Additional information

• Safari is especially bad
• it will not reproduce if the drawer placement is something other than "end" (e.g. "start")
• weirdly it does not happen always in my code base, but I was not able to figure out why because the same components sometimes trigger it and sometimes not. The one where it happened for me was a drawer that had the dropdown inside of it that again opened a new drawer. I was surprised I could reproduce it with the simple case on codepen
• I could also reproduce it with some weird combinations of elements (not that I would expect it to work normally), like: dropdown with two triggers and the second one directly opening the drawer

[nomve]

My guess is it's something with the animations of both elements, so I was able to "fix" it by stopping the click event from bubbling from the menu-item. It works for me in this case, but it's not ideal in general. But anyway, hope it helps someone.

[KonnorRogers]

A setTimeout on the panel.show() also works too...curious... 🤔

[nomve]

A setTimeout on the panel.show() also works too...curious... 🤔

that's a better fix, thanks. My workaround prevents the menu from getting closed when clicked.

[claviska]

@KonnorRogers this doesn't happen in Web Awesome. It's likely related to the JS animation stuff, which I reworked to use CSS animations in 3.0.

We'll welcome a PR if anyone has the time to investigate it further, but just know that this bug has been fixed in the next major.