Strange animation behaviour with bootstrap

[mokhosh]

I don't know if this is a livewire but or a bootstrap bug exactly. But I have a button in a navbar. When I press it a model shows up. Now If I put my modal before the button wire:transition won't work, but if I move the modal div after the button it works without any problems.

I tried different classes and tags, moving the component out of navbar, putting the transition on different elements, and whatever else I could think of but the only work around seems to be moving the code after the button!

[calebporzio]

yeah, this sort of thing happens with Livewire's current dom-diffing solution.

You have two options: A) wrap the conditional modal/whatever in a root div B) Add a wire:key="some-modal" attribute to the modal element (or if that doesn't work, the button).

The reason behind the issue is that the dom-differ doesn't know it's the same button, and when the div above the button is conditionally removed, it thinks elements are removed/added instead of moved.

Hard to explain, especially without code examples. But hope this helps.

If not, maybe submit some simplified code-examples and we can talk through them.

[mokhosh]

Thanks. Adding key to the button worked. The only thing I didn't think would.