Phx-update="ignore" for Alpine.js results in `"ignore" requires setting an ID on the container`

Phoenix Forum Questions / Help
, ,
1

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?

2

That’s no longer the case. Alpine can be integrated into liveview today without those ignore attributes.

3 Likes