Livewire modal closing after input changes

Question

I have modal form with multiple inputs. If i put wire:ignore.self, valdiations or submit method just running first time.

<div class="modal fade" tabindex="-1" id="formModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <form class="form">
          <div class="fv-row row mb-5">
            <div class="col">
              <input type="text" class="form-control" wire:model="firstname"/>
              @error('firstname')
              <div class="fv-plugins-message-container invalid-feedback">
                {{ $message }}
              </div>
              @enderror
            </div>
            <div class="col">
              <input type="text" class="form-control" wire:model="lastname" />
              @error('lastname')
              <div class="fv-plugins-message-container invalid-feedback">
                {{ $message }}
              </div>
              @enderror
            </div>
          </div>
        </form>
      </div>
    </div>
 </div>

i tried wire:ignore.self and wire:model.defer. Validations just running first time.

Answer 1

Just add wire:ignore.self at the div modal element, also add wire:model.defer for each livewire input.

Your code will be like this:

<div class="modal fade" tabindex="-1" id="formModal" wire:ignore.self>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <form class="form">
          <div class="fv-row row mb-5">
            <div class="col">
              <input type="text" class="form-control" wire:model.defer="firstname"/>
              @error('firstname')
              <div class="fv-plugins-message-container invalid-feedback">
                {{ $message }}
              </div>
              @enderror
            </div>
            <div class="col">
              <input type="text" class="form-control" wire:model.defer="lastname" />
              @error('lastname')
              <div class="fv-plugins-message-container invalid-feedback">
                {{ $message }}
              </div>
              @enderror
            </div>
          </div>
        </form>
      </div>
    </div>
 </div>