Laravel Livewire : select in modal close the modal with no rendering

Question

I'm trying to have a select in a modal, in order to have a contact formular in my application. The view is ok, the select is here, but when I select one of the options, the modal close and block everything.

I'm in a livewire component.

Resume.php

namespace App\Http\Livewire\Simulation;

use Livewire\Component;
use App\Models\Contributor;
use App\Models\Course;
use App\Models\Finance;
use Barryvdh\DomPDF\Facade as PDF;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\URL;
use Illuminate\Support\Facades\Validator;

class Resume extends Component{
    public $contactSchool, $contactSchoolOther;
    public function submitForm()
    {
        Validator::make(
            [
                'contactSchool' => $this->contactSchool,
                'contactSchoolOther' => $this->contactSchoolOther
            ],
            [
                'contactSchool' => 'required'
            ]
        )->validate();
        dd('test');
    }
    public function render()
    {
        return view('livewire.simulation.resume');
    }

}

livewire.simulation.resume.blade.php

<div>
  @include('livewire.simulation.cards._student-project')
  </div>

the @include is because I've a lot of other little components to add

livewire.simulation.resume._student-project.blade.php

<div class="card card-custom card-stretch gutter-b">
    <div class="card-body">
        <div class="row">
            @if ($finance->course->employability_comment)
                <div class="col-md-6">
                    <div class="card card-custom card-stretch gutter-b">
                        <div class="card-header bg-light-primary">
                            <div class="card-title font-size-h3">
                                Statistiques Emploi 
                            </div>
                        </div>
                        <div class="card-body">
                            Stats emploi
                        </div>
                    </div>
                </div>
            @endif
            <div class="card-body text-center">
                <a href="#" class="btn btn-primary text-uppercase" data-toggle="modal"
                    data-target=".contactSchool-modal-lg">contacter l'école</a>
            </div>
        </div>
    </div>
</div>
<div class="modal fade contactSchool-modal-lg" id="contactSchool" role="dialog"
    aria-labelledby="contactSchoolModaltitle">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title text-center text-uppercase" id="contactSchoolModaltitle">contacter
                    {{ $finance->school->name ?? '' }}
                </h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="close">
                    <span aria-hidden="true close-btn">×</span>
                </button>
            </div>
            <div class="modal-body">
                <!--begin::Select-->
                <form>
                    <div class="form-group">
                        <label>Indiquez la raison pour laquelle vous souhaitez contacter l'école</label>
                        <select name="contactSchool" wire:model="contactSchool"
                            class="form-control form-control-solid form-control-lg">
                            <option value="">Select</option>
                            <option value="0">Je souhaite assister à une journée portes ouvertes</option>
                            <option value="1">Mon financement est finalisé</option>
                            <option value="-1">Autre raison</option>
                        </select>
                        @if ($contactSchool == -1)
                            <div class="form-group">
                                <label>Merci de préciser la raison</label>
                                <textarea type="text" wire:model="contactSchoolOther" placeholder="commentaire" value=""
                                    name="contactSchoolOther" class="form-control form-control-solid"
                                    rows="3"></textarea>

                                @error('contactSchoolOther') <span class="error"
                                        style="color:#FF0000">{{ $message }}</span>
                                @enderror
                            </div>
                        @endif
                        @error('contactSchool') <span class="error" style="color:#FF0000">{{ $message }}</span>
                        @enderror
                    </div>
                    <!--end::Select-->
                </form>
            </div>
            Result : {{ $contactSchool }}
            <div class="modal-footer">
                <div class="d-flex justify-content-between border-top mt-5 pt-10">
                    <div class="mr-3" wire:loading.remove wire:target='submitForm'>
                        <button type="button" class="btn btn-success font-weight-bolder text-uppercase px-9 py-4"
                            wire:click='submitForm'>envoyer</button>
                    </div>
                    {{-- <div class="alert alert-success" wire:loading wire:target='submitForm'>
                        Votre demande a été prise en compte, merci de patienter quelques instants !
                    </div> --}}
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                </div>

            </div>
        </div>
    </div>
</div>

What I would like is to select one option and submit it, in order (next step) to create an entity in my database. Thank you for your help !

Answer 1

After a lot of research, I've found the mistake.

In the parent element of the modal, it's an obligation to put the command wire:ignore.self

So, in the blade, it will be :

<div wire:ignore.self class="modal fade contactSchool-modal-lg" id="contactSchool" role="dialog"
    aria-labelledby="contactSchoolModaltitle">

With that, it works correctly !