I use Alpine.js in a vanilla Phoenix 1.5.8 application to create a profile dropdown in the top navigation bar.
Here’s the code:
<div class="ml-4 relative flex-shrink-0" @click.away="open = false" x-data="{ open: false }" phx-update="ignore">
<div>
<button type="button" class="max-w-xs rounded-full px-3.5 py-2 flex items-center text-sm hover:bg-gray-200 hover:bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-white lg:p-2 lg:rounded-md" id="user-menu" aria-expanded="false" aria-haspopup="true" @click="open = !open" id="user-menu" aria-haspopup="true" x-bind:aria-expanded="open">
<div class="flex items-center">
<div>
It works in the browser but maybe that is by chance. If I run mix test I get
1) test disconnected and connected render (ExampleWeb.PageLiveTest)
test/example_web/live/page_live_test.exs:6
** (exit) exited in: Phoenix.LiveViewTest.live("/")
** (EXIT) an exception was raised:
** (ArgumentError) setting phx-update to "ignore" requires setting an ID on the container, got:
It is part of a component which I call with <%= live_component @socket, HeaderComponent, id: 1 %>
If I add an id="1000" after the phx-update="ignore" the test runs but the browser doesn’t show the page properly.
Google is not a big help here. It says that I should add phx-update="ignore" for Alpine.js stuff because otherwise LiveView and Alpine will fight each other but doesn’t mention an id for this scenario at all.
What did I do wrong? How can I fix it?
