Modal closing when the value changes in component

[peeyushx]

The modal closes automatically when the value of a variable is

Steps to reproduce

Context

• Livewire version: [e.g. 1.0.0]
• Laravel version: [e.g. 7.0.0]
• Browser: [ Chrome]

view:
`

    <!-- Modal Header -->
    <div class="modal-header">
      <h4 class="modal-title">New Enquiry</h4>
      <button type="button" class="close" data-dismiss="modal" data-target="#myModal">&times;</button>
    </div>

    <!-- Modal body -->
    <div class="modal-body">
    <form action="{{route('enquiries.create')}}" wire:modal.prevent method="post" class=" form text-center">
          @csrf
        <div class="row">
            <div class="col-lg-4 form-group text-left">
                <label for="spin">Source Pin</label>
                <input type="number" class="form-control"  value="452010" name="spin" id="spin" placeholder="000000" wire:model.lazy='spin' wire:change.lazy="$emit('spincodeAdded')">
              </div>
              <div class="col-lg-4 form-group text-left">
                <label for="dpin">Delivery Pin</label>
                <input type="number" class="form-control" name="dpin" id="dpin" placeholder="000000" wire:model.lazy='dpin' wire:change.lazy="$emit('dpincodeAdded')">
              </div>
              <div class="col-lg-4 form-group text-left">
                <label for="requirementDate">Requirement Date</label>
                <input type="date" class="form-control" value="<?= date('Y-m-d', time()); ?>" min="<?= date('Y-m-d', time()); ?>" name="requirementDate" id="requirementDate">
              </div>

        <div class="col-lg-6 form-group text-left">
          <label for="source">Source City*</label>
          <input type="text" class="form-control" name="source" id="source" value="@if($source){{$source['locality']}}@endif" placeholder="City - District - State">
        </div>
        
        
        <div class="col-lg-6 form-group text-left">
            <label  for="destination">Destination City*</label>
            <input type="text" class="form-control" name="destination" id="destination" value="@if($destination){{$destination}}@endif" placeholder="City - District - State">
        </div>

`

component:

`<?php

namespace App\Http\Livewire;

use App\pincode;
use Illuminate\Support\Facades\DB;
use Livewire\Component;

class EnquiryModal extends Component

{
public $spin;
public $dpin;

public $source;
public $destination;
protected $listeners = [
    'spincodeAdded',
    'dpincodeAdded',
];

public function spincodeAdded()
{
    $addressofsource = pincode::where('pincode', $this->spin)->first();
    // dd($addressofsource['locality']);
    $this->source = $addressofsource;
}

public function dpincodeAdded()
{
    $addressofdelivery = DB::select('select locality from pincodes where pincode = ? limit 1', [$this->dpin]);

    $addressofdelivery =$addressofdelivery[0]->locality; 
    $this->destination = $addressofdelivery;
}
public function render()
{
    return view('livewire.enquiry-modal');
}

}
`

Tried removing js, preventing default actions, calling the model by js, keeping the modal static, open by deafult but it gets closed as soon as the data loads

[ryangjchandler]

@peeyushx - please try adding wire:ignore.self to the modal's parent element to prevent Livewire from replacing that DOM node when patching.

[peeyushx]

A super thank to you dude, this saved so much of my time. THANKSSS

[adminlacaq]

If you would like livewire to refresh the modal without closing, do this to your modal and controller

In the controller :
Add a public member $class and $style,
In your method that's closing your modal add those lines;
$this->class = "show";
$this->style = "display: block;";

In your component view file (modal)

<div    class="modal fade {{ $class }}"
    id="addRdpSearchModal"
    tabindex="-1"
    role="dialog"
    style="{{ $style }}"
    aria-labelledby="addRdpSearchModalLabel"
    aria-hidden="true">

Thats it... so let's say you want to send a validation error back, it's super helpfull

[l0gical]

@peeyushx - please try adding wire:ignore.self to the modal's parent element to prevent Livewire from replacing that DOM node when patching.

Awesome, did exactly what I was after, thanks!

[Keania-Eric]

You can also try this
<x-jet-dialog-modal styles="sm:max-w-4xl w-2/3 z-100" wire:model.defer="showSignModal">
this worked for me