Dropdown is broken with current alpine.js version

[FeeJai]

This is a regression. Alpine.JS update to 3.13.6 broke PetalComponents.Dropdown. In the meantime an update to Alpine.JS seems to have fixed this issue, but the issue just reappeared with the latest alpine.js update. Can we update the compent to work reliably with 3.13.6 and 3.14.6

@atomkirk previously described the issue here: alpinejs/alpine#4075

[mitkins]

Hi @FeeJai, I'm onto it! See the reply in the related discussion.

[mitkins]

I did some testing. It seems that the latest version that works is 3.14.3.

Looking at 3.14.4 onwards, there seems to be a change in Alpine.js that prevents this code from doing its thing:

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

Of course, I could be wrong. But if I'm correct, then this could be a general issue for LiveView - rather than one for Petal Components. I'll keep an eye on this - once we get to the bottom of it, then I'll update this issue.

For now, I think 3.14.3 might be the go...

[Matsa59]

For people skipping the link given in the description, take a look at alpinejs/alpine#4075 (reply in thread) I gave a workarround that seems to work.

This is not related to dropdown but the whole alpinejs lifecycle system. This but is caused by incompatibility between AlpineJS and Phoenix LV stream system. If you don't use LV stream you may not experiment any problem and the code given by @mitkins in the reply above is enough.

I'll not recommend using this workaround except if you have to use LV stream