Dropdown in LiveView opens when I click on any button

[luigi-discoup]

In the root layout of my project, I've incorporated the Petal's dropdown menu using the following code:

<div class="flex items-center gap-3">
  <.dropdown id="user-menu">
    <:trigger_element>
      <div class="inline-flex items-center justify-center w-full align-middle focus:outline-none">
        <.avatar size="sm" name={@current_user.email} />
        <HeroiconsV1.Solid.chevron_down class="w-4 h-4 ml-1 -mr-1 text-gray-400 dark:text-gray-100" />
      </div>
    </:trigger_element>
    <.p class="flex justify-start text-sm font-light text-gray-500 dark:text-gray-400 py-2 px-4">
      <%= t("Logged in as: %{email}", email: @current_user.email) %>
    </.p>
    <.dropdown_menu_item link_type="a" to={~p"/users/log_out"} method="delete">
      <HeroiconsV1.Outline.logout class="w-5 h-5" /> <%= t("Log out") %>
    </.dropdown_menu_item>
  </.dropdown>
</div>

then I render a live view in that root layout.

However, I've encountered an issue. Every time I click on a button or link associated with an action, it unexpectedly triggers the dropdown open event.

For instance, within my live view, I have this code:

<.header>
  Listing platforms
  <:actions>
    <.link patch={~p"/platforms/new"}>
      <.button>New platform</.button>
    </.link>
  </:actions>
</.header>

Clicking the New platform also triggers the dropdown menu to open.

Interestingly, if I utilize js_lib="live_view_js", everything seems to work as intended.

[luigi-discoup]

It turns out that it's not a Petal issue but a Phoenix LiveView-AlpineJS integration one. I found the solution in the official doc of Phoenix LiveView.

To add support to AlpineJS, it's enough to use these options:

let liveSocket = new LiveSocket("/live", Socket, {
  ...,
  dom: {
    onBeforeElUpdated(from, to){
      if(from._x_dataStack){ window.Alpine.clone(from, to) }
    }
  },
})

However, this should probably be added to the Petal's documentation as well.

[mplatts]

Oh yes thanks - we'll add it in

[Liferenko]

it helped. Thank you