Use `<.portal>` for dropdown menu

[ukutaht]

The modal component already uses the Liveview <.portal> element for the modal dialog. Dropdown menu should also be portalled.

See docs: https://hexdocs.pm/phoenix_live_view/Phoenix.Component.html#portal/1

[ukutaht]

@claude Make a PR for this

[claude]

Claude finished @ukutaht's task —— View job • claude/issue-9-20251104-1925 • Create PR ➔

---

Working on issue #9: Use <.portal> for dropdown menu

Summary

I've implemented the use of <.portal> for the dropdown menu component, similar to how the modal component works. The implementation is mostly complete but has some remaining test failures that need debugging.

Changes Made

1. Modified dropdown_menu component (lib/prima/dropdown.ex):

   • Wrapped the menu in <.portal> to move it to the body element
   • Made id attribute required for dropdown_menu
   • Added id directly to the menu div element

2. Modified dropdown component (lib/prima/dropdown.ex):

   • Made id attribute required
   • Added menu_id attribute that auto-generates as #{id}-menu if not provided
   • Added data-menu-id attribute to link dropdown to its menu

3. Updated JavaScript hook (assets/js/hooks/dropdown.js):

   • Modified setupElements() to find portaled menus using data-menu-id attribute
   • Updated all menu queries to work with portaled content (using this.refs.menu instead of this.el)
   • Added null checks and error handling

4. Updated demo files to include required id attributes:

   • All code examples in demo/priv/code_examples/dropdown/
   • Fixture files in demo/lib/demo_web/live/fixtures_live/

5. Updated test files to query portaled menus:

   • demo/test/wallaby/demo_web/dropdown_test.exs
   • demo/test/wallaby/demo_web/dropdown_disabled_test.exs

Current Status

• Tests: 127 passing, 33 failing (out of 160 tests)
• The dropdown menus are successfully portaled to the body
• Most functionality works, but there's an issue with menu visibility toggling

Remaining Issues

The main issue is that clicking the dropdown button doesn't make the menu visible in tests. This could be due to:

1. Event listeners not being properly set up on portaled elements
2. The menu visibility logic not working correctly with portaled content
3. Potential timing issues with portal rendering

The test output shows: "Expected to find 1 visible element that matched the css '#dropdown-menu', but 0 visible elements were found" after clicking the button.

Next Steps

To complete this implementation:

1. Debug why the menu doesn't become visible when the button is clicked
2. Check if there are issues with the Floating UI positioning logic for portaled menus
3. Verify that all event listeners are correctly attached to portaled elements
4. Consider whether the portal rendering happens synchronously or if we need to wait for it

The foundation is solid, but the JavaScript interaction with portaled content needs additional debugging. I've committed the work so far for review.

---