The Unicorn and Bootstrap Modals

[LexxLuey]

How do I use Unicorn with Modals?

I currently have this:

<button type="button" class="btn btn-primary btn-fab btn-icon btn-round" data-toggle="modal" data-target="#editModal" unicorn:click="setForm('{{ kid.id }}')"> <i class="tim-icons icon-pencil"></i> </button>

But whenever I click the button, the modal pops up and disappears immediately, while also causing the page to freeze until I refresh the page.

What am I doing wrong?

[adamghill]

What's happening (I expect) is that you have some JS that is listening for clicks on any element that has data-toggle="modal" so that triggers the modal to pop up, but then Unicorn is also listening to elements with unicorn:click which does an AJAX call in the background, re-renders the HTML, and tries to replace the HTML that has updated. Without seeing more of the code, it's hard to recommend how to get around this unfortunately. One option if you need both the pure JS modal and Unicorn interactions happening is to reduce the scope of HTML that Unicorn changes by using partial. There might be other approaches I can suggest if you can make a small, reproducible repo with example code.