Laravel Livewire hiding bootstrap modal with click event - bootstrap-modal

Question

I am building a livewire-based application which I came to a point where I need wire:click event to fire a function in the livewire component class as well as open a Bootstrap Modal.
Without the wire:click event, the Bootstrap Modal opens.
Without the Bootstrap Modal id, the wire:click event works just fine.
With both the two, the Modal opens but hides (not dismissed) forever, until I reload the page before I could do anything.
By default when you create livewire using php artisan make:livewire --name, the view part comes with <div> //comment </div> tag. So, whenever the place the Modal inside the div tag the above problem occurs.
However, if the place the Modal in outside the div tag it works fine BUT NOT RECOGNIZING THE LIVEWIRE VARIABLES
I want to know;
If the livewire doesn't support Bootstrap Modal or having conflicts with the Modal scripts.
If one event can not be fired twice at the same time (wire:click and default click event).
Why except tags are enclosed inside the <div> </div> before livewire recognizes it.
<a href="#" wire:click="edit({{ $file->id }})" class="mr-1 edit" data-toggle="modal" data-target="#editFileModal">
<i class="align-middle fa fa-edit"></i>
</a>

Answer 1

By adding wire:ignore.self to the root element of my modal fixed it for me.
Modal trigger button.
<button wire:click="updateModal({{ $item->id }})" type="button" class="btn btn-sm btn-label-brand btn-bold" data-toggle="modal" data-target="#updateModal"> Update</button>
Example modal dialog.
<div wire:ignore.self class="modal fade" id="kt_modal_1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient" class="form-control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient" wire:model="recipient">
</div>
<div class="form-group">
<label for="message" class="form-control-label">Message:</label>
<textarea class="form-control" id="message" wire:model="message"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>

Answer 2

You could use Alpine.js (that comes with Livewire) to fire both the wire:click and the toggle of the modal. By doing this you could even listen for the wire:click call to complete before you open the modal, if that suits you better.
<a href="#" x-on:click="$wire.edit({{ $file->id }}); $('#editFileModal').modal('show');" class="mr-1 edit">
<i class="align-middle fa fa-edit"></i>
</a>

Answer 3

I was having the exact same issue, here is my solution:
Instead of using the attribute data-target="#myModal" to show myModal when the button is clicked, I just use wire:click function to do that. ie:
<button class="btn btn-sm btn-danger" wire:click.prevent="myFunction({{$some_id}})">...</button>
In myFunction, do whatever you want, after that, add:
$this->dispatchBrowserEvent('openModal', ['someParameter' => 'some value']);
In the view file, add:
<script>
window.addEventListener('openModal', event => {
$('#myModl').modal('show');
//alert('parameter: ' + event.detail.someParameter);
})
</script>
See https://laravel-livewire.com/docs/2.x/events#browser for more info