DropdownMenuContent as-child > ref element is not updated when closed

[linusang]

Environment

Developement/Production OS: MacOS Sonama 14.3.1
Node version: 18.18.0
Package manager: [email protected]
Radix Vue version: 1.4.6
Vue version: 3.4.18
Client OS: MacOS Sonama 14.3.1
Browser: Chrome 121.0.6167.160 (Official Build) (arm64)

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-7wzxop?file=package.json,src%2FApp.vue&terminal=dev

Steps to reproduce

1. open devtools > console
2. click on the Menu button
3. in console, should see "watch: contentEl ..."
4. click on the Menu button again
5. in console, should see "watch: contentEl null"
6. go to line 49 and remove the "@animationend" dom event and save the file
7. reload the page
8. click on the Menu button
9. in console, should see "watch: contentEl ..."
10. click on the Menu button again
11. no "watch: contentEl null" is shown (not expected)

Describe the bug

A custom div is set to on the DropdownMenuContent slot with as-child flag. This custom div is referenced in the code via ref="contentEl". The ref property is watched by a watch() callback to track the existence of the div element. When the menu is closed, the watch callback should return null. However, the callback is not fired when the menu is closed. Strangely, if we were to hook any native DOM event like "@animationend" to the element, the watch callback is fired as expected.

Expected behavior

DropdownMenuContent > as-child element > referenced via ref should be null when menu is in closed state.

Context & Screenshots (if applicable)

No response

[zernonia]

Hmm.. seems abit weird that passing string to ref doesn't update the it when unmounted in this case, but using function does. Might be something with Vue, for the mean time you can use this as alternative

<div
  style="background-color: yellowgreen"
  :ref="(el) => (contentEl = el)"
>

https://stackblitz.com/edit/vitejs-vite-dueuhu?file=src%2FApp.vue

[zernonia]

Moving this to discussion as we don't have a direct fix for this. and the solution above might work 😁