vendredi 4 décembre 2020

Issue when using bootstrap modal in child component in laravel livewire

I am using livewire in laravel and have come across strange issue.

I have a bootstrap modal in child component. When the child component has to re-render when something is typed in modal the modal breaks and I am left with black screen. Actually the issue is in ongoing project but can be boild down to what is seen below.


Parent component class file.

<?php                                                                                                                                                     
                                                                                                                                                          
namespace App\Http\Livewire;                                                                                                                              
                                                                                                                                                       
use Livewire\Component;                                                                                                                                
                                                                                                                                                                                      
class ParentComponent extends Component                                                                                                                                               
{                                                                                                                                                                                     
    public function render()                                                                                                                                                          
    {                                                                                                                                                                                 
        return view('livewire.parent-component');                                                                                                                                     
    }                                                                                                                                                                                 
}     

Parent component blade file

<div>                                                                                                                                                     
    <!-- parent-component.blade.php -->

    @livewire('child-component')                                                                                                                          
                                                                                                                                                          
    <!-- Other code -->                                                                                                                                
</div>

Child component class file


<?php                                                                                                                                                     
                                                                                                                                                          
namespace App\Http\Livewire;                                                                                                                              
                                                                                                                                                       
use Livewire\Component;                                                                                                                                
                                                                                                                                                          
class ChildComponent extends Component                                                                                                                    
{                                                                                                                                                         
    public $name = "";                                                                                                                                    
                                                                                                                                                          
    public function render()                                                                                                                              
    {                                                                                                                                                     
        return view('livewire.child-component');                                                                                                          
    }                                                                                                                                                     
}  

Child component blade file

<div>                                                                                                                                                     
  <!-- Button trigger modal -->                                                                                                                           
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">                                                          
    Launch demo modal                                                                                                                                  
  </button>                                                                                                                                            
                                                                                                                                                          
  <!-- Modal -->                                                                                                                                          
  <div class="modal" id="exampleModal" tabindex="-1">                                                                                                     
    <div class="modal-dialog">                                                                                                                            
      <div class="modal-content">                                                                                                                         
        <div class="modal-body">                                                                                                                          
                                                                                                                                                          
          <!--                                                                                                                                            
           |    Issue here                                                                                                                                
           |                                                                                                                                              
           |    When user types here and component has to render again the modal breaks.                                                                  
           |                                                                                                                                              
           -->                                                                                                                                            
          <input type="text" wire:model="name" />                                                                                                         
          <p></p>                                                                                                                              
                                                                                                                                                          
        </div>                                                                                                                                            
      </div>                                                                                                                                              
    </div>                                                                                                                                                
  </div>                                                                                                                                                  
</div>

I have seen few solutions in the internet but nothing seems to solve this specific issue.




Aucun commentaire:

Enregistrer un commentaire