3.13.6 breaks petal dropdown menus

[atomkirk]

I don't have many details, but I can confirm 3.13.6 breaks these dropdown menus https://petal.build/components/dropdowns

https://github.com/petalframework/petal_components/blob/main/lib/petal_components/dropdown.ex

I had my tag not pinned (mistake)

<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

and all the dropdowns on my site just stopped working. I pinned to 3.13.5 and they work again.

[ekwoka]

The seem to work on that site only after navigating to another page and back.

To me it looks like they are designed poorly and have two click outside listeners on different elements...so every click is a Click outside setting open to false...

[mitkins]

I think it might be related to this discussion - #4010.

When you visit a page for the first time in LiveView - the page is mounted twice:

• Once for the initial render (HTTP request); and
• Once again after the JavaScript client connects to the server (usually over a web socket)

In LiveView I'm assuming there are mutations on the DOM between mounts (even though the contents itself hasn't changed). The following code is supposed to ensure that Alpine retains state (after mutation):

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

If this code fails (for some reason), then two events will be registered for the same element.

I think perhaps that this is the case - and explains your (correct) assessement. A single element is being assigned two click outside listeners. When you navigate to another LiveView and come back, there will be only one event listener.

This is happening to me with the above code (in the past it wasn't a problem). When I used the code in the referenced discussion:

let liveSocket = new LiveSocket("/live", Socket, {
  ...
  dom: {
    onBeforeElUpdated(from, to) {
      if (from && from._x_isInit) {
        window.Alpine.cloneNode(from, to);
      }
    },
  },
  ...
});

It worked!

So does that mean that Alpine.clone has changed across releases?

P.S. I'm not sure if the re-written method is the recommended way to do it. But the PR was merged

[mitkins]

Though it seems that looking through main, that _x_isInit isn't a thing. So would this be correct?

if (from._x_dataStack) {
  window.Alpine.cloneNode(from, to);
}

[mitkins]

I've been doing more testing. Although the above code helped with the dropdown component - other parts of https://petal.build/ didn't work like they once had (e.g. parts of the main menu don't automatically collapse when they should on second mount).

I thought I might test specific versions of Alpine.js so I could identify the last known version that worked. Using the following code:

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

I tested the following versions:

• 3.13.5 to 3.14.3 worked as expected
• 3.14.4 to 3.14.7 did not

I did try cloneNode for 3.14.4 to 3.14.7, but I experienced the issues mentioned above.

[FeeJai]

Thank you @atomkirk. This post just solved my issue

Edit: I created a ticket at Petal Components: petalframework/petal_components#379