Wire:click, wire:model, etc close parent Bootstrap collapse

[BrandonKerr]

Description

Input with wire:model, button with wire:click, etc cause the parent Bootstrap collapse field to close.

Steps to reproduce

On a Livewire component, add a Bootstrap collapse as described in https://getbootstrap.com/docs/4.5/components/collapse/. Within the content of the collapsed element, add any input or button with a wire:model or wire:click. When the input is changed or the button is clicked, the opened collapse content is closed.

For a simple example, please see https://laravelplayground.com/#/snippets/ee1ba496-de77-4b29-8feb-70243ca89fc7 where I have added a simple button with a wire:click to set a message, which causes the error. There is also a standard button with a js function to set a span's content, which does not close the collapse.

[nedwors]

Would wire:ignore solve the issue? Can't load the playground but sounds like it's the Livewire DOM diffing. See the "Ignoring DOM-changes (using wire:ignore)" section on this page: https://laravel-livewire.com/docs/alpine-js.

[BrandonKerr]

Would wire:ignore solve the issue? Can't load the playground but sounds like it's the Livewire DOM diffing. See the "Ignoring DOM-changes (using wire:ignore)" section on this page: https://laravel-livewire.com/docs/alpine-js.

Thank you!
That ended up being it. I had tried wire:ignore before on various parts of the component with varying degrees of failure. In the end, the solution was to add wire:ignore.self onto the collapse element.

Since the playground wouldn't load, here's the working example for posterity in case anyone else runs into this issue:

<div>
  <p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample" wire:ignore.self>
  <div class="card card-body">
    {{ $message }}
    <button type="button" wire:click.stop="$set('message', 'Hello')">Say Hi</button>
  </div>
</div>