Alpine 3.9.1 breaks the Modal

[jfvoliveira]

Hey there

I was using the 3.x.x alpine version and today noticed that the modal opens fine the first time, but after it closes, when we try to open any other wire-elements/modal it opens and immediately close the modal (but it leaves the overlay there).
Additionally, in the inspector, the modal class keeps updating (but not changing).

Here's a gif:

Anyone with the same behaviour?

I've changed the alpine to 3.9.0 and it works as expected.

It this an Alpine issue or a Modal issue?

Thanks

[seabasss]

Same here. I'll pin an older version of Alpine for now.

[PhiloNL]

Yeah, something strange is happening, it also fires a ton of xhr requests.
3.9.1 introduces some internal changes to the watch function and it seems to fire an endless loop when calling a livewire method.
I've been debugging here but haven't been able to find the root cause.

[ReinisL]

I know this is not the best way and doesn't fix the root cause, but as $watch keeps track of the previous value, maybe you could trigger the this.$wire.resetState() only if those values have been changed, in this case

this.$watch('show', (value, oldValue) => {
  ...
  if(value !== oldValue) {
    setTimeout(() => {
      this.activeComponent = false;
      this.$wire.resetState();
    }, 300);
  }
})

As I said, not the cleanest way, but it prevents the loop

[PhiloNL]

I ended up removing the $watch entirely. I think your solution would fix the issue, but the watcher would still go off in a loop.

[PhiloNL]

Should be fixed now https://github.com/wire-elements/modal/releases/tag/1.0.5