Bootstrap Modal used in livewire

[Neeraj1005]

IN my project I am using livewire. And I want to add reset input functionality for modal.
Basically in bootstrap modal we know that if we click outside the modal the modal will hidden. But what I want If I click outside the modal I want to reset the input field…in my case the input field is not reset…I can implement the reset functionality using button but I want as well for if I click outside the modal input field will cleared.
Can anyone help me that how can I implement that…?

[prospero]

in the scrip section you have to catch the total closes of the modal and dispatch an event that catches the component and clear the vars

$(document).ready(function(){
            $("#idModal").on('hidden.bs.modal', function() {
                livewire.emit('forcedCloseModal');
            });
        });

and in the component:

protected $listeners = [ 'forcedCloseModal'];

public function forcedCloseModal()
{
     // clean vars 
}

[Neeraj1005]

this javascript behavior is not working.
But I solve my problem with another alternative solution using wire:click.
Basically in my modal I faced on problem that was If i was clicking on edit button modal popup correctly fine. But after that if I click on Add button the previous value was loaded on modal.
Now using listener event and click event I solved this thank you @prospero for giving the listeners techinque…
If there is any another alternative please tell me…

 <a 
    wire:click="$emitUp('forcedCloseModal')"
    href="#" data-bs-toggle="modal" data-bs-target="#departmentModal"
    class="btn btn-sm btn-pink-outline float-end">
     <i class="bi bi-plus-square-dotted p-2"></i>
     Add department
</a>

[prospero]

of course, once you load data for example, the selected item to be edited or deleted you have to reset all the vars. it’s the thing where you forced the close clicking outside the modal and for that I give this jQuery script and you handle that part. In other cases, when close the modal by Cancel button or accomplish the editing you have to clean all the vars aswell and in my case, use jQuery for open and close the modals…just for handle right the operations

[yahhoo]

thank you.