elements@1.0.18 & Google Chrome: Dropdown menu inside <el-dialog> auto-closes when hovering any menu item

[roughike]

What component (if applicable)

• URL for category: https://tailwindcss.com/plus/ui-blocks/documentation/dropdown-menu
• Component name: Dropdown menu

Describe the bug
@tailwindplus/elements 1.0.18 introduced a bug that closes the dropdown menu when hovering any menu item on Google Chrome. On 1.0.17 hovering menu items works fine - the menu stays open.

To Reproduce
Steps to reproduce the behavior:

1. Use @tailwindplus/elements@1.0.18.
2. Use Google Chrome on macOS (tested with Sequoia 15.6.1 and Chrome 141.0.7390.108)
3. Open a dropdown menu (which has to be inside of <el-dialog>).
4. Hover any item.
5. The menu closes automatically - so users can never click on a menu item.

Expected behavior

1. Open a dropdown menu.
2. Hover any item.
3. Menu stays open.

Screenshots

Nayttotallennus.2025-10-18.kello.9.18.57.mov

Browser/Device (if applicable)

• OS: macOS Sequoia 15.6.1
• Browser: Chrome 141.0.7390.108 (the latest)
• Version: @tailwindplus/elements@1.0.18

Additional context
Safari works fine - Chrome doesn't.

[philipp-spiess]

@roughike Hey! Do you mind sharing your markup so we can try to reproduce this? I've been trying it with the default Dropdown component and 1.0.18 in Chrome 141 and can not reproduce this issue:

CleanShot.2025-10-20.at.12.02.35.mp4

[hayesr]

@philipp-spiess I'm not sure if this is exactly the same context that @roughike has, but I am seeing the same behavior when an el-dropdown is inside of an el-dialog. Outside of a dialog works fine for me too. I haven't tried nesting a dropdown within other Tailwind Plus elements yet.

Quick vid and rough reproduction:

Screen.Recording.2025-10-23.at.12.23.55.PM.mov

See live here: https://erichayes.net/repros/twpdialog.html
Source: https://github.com/hayesr/hayesr.github.io/blob/master/repros/twpdialog.html

[roughike]

@hayesr That's exactly my setup - el-dropdown inside el-dialog, specifically, a Dropdown from Tailwind Plus, inside a Drawer from Tailwind Plus.

Was just about to boil it down into a reproduction - thanks for saving my time :-)

[thecrypticace]

I can reproduce — thanks. Only happens in Chrome oddly enough. Both Safari and Firefox work as expected.

[thecrypticace]

I've tracked this down — I think the cause is a browser bug.

The focusout event we listen for is supposed to have a related target which is the element gaining focus — but in Chrome it's null which causes us to think a focused element lost focus because it was removed.

We'll need to come up with a workaround and file a browser bug with Chromium if I can't find an existing one.

[roughike]

@thecrypticace Great that you were able to reproduce!

Just in case you missed it - elements@1.0.17 on Chrome works fine for me. But elements@1.0.18 is where the bug was introduced. So something must've happened in 1.0.18, no?

[thecrypticace]

Yes, v1.0.18 fixed an issue where dialogs wouldn't focus trap properly if a focused element inside was disabled / removed. It does this by using focusout but that's apparently bugged in Chrome.