Livewire form content dissapears

Question

I have this code in a livewire view which contains a form. This is a simple select field in which you are supposed to select a document type from a list.

<div>
    <label for="documenttype" class="form-label"><strong>Document type</strong></label>
    <select wire:model="documenttype_id" class="form-control" id="documenttype" aria-describedby="documenttypeHelp">
        <option selected>{{ __( 'Choose' ) }}</option>
        @foreach( $documenttypes as $documenttype )
            <option value="{{ $documenttype->id }}" @if( isset( $documenttype_id ) && ( $documenttype_id == $documenttype->id ) ) selected @endif>
                {{ $documenttype->name }}
            </option>
        @endforeach
    </select>
</div>

The thing is that I want it to have preselected the correct value when editing a client. But for some reason when I add this code: @if( isset( $documenttype_id ) && ( $documenttype_id == $documenttype->id ) ) selected @endif in the options loop, the form starts behaving strangely. Everytime the person filling the form selects an option the content becomes blank.

This is situation 1 (before selecting an option):

And this is situation 2 (after selecting the option):

I have no idea why this happens, can someone guide me on how to solve this issue?

Answer 1

add wire:ignore.self to root select's div. Using this modifier, you instruct Livewire don´t update the element itself but allows modification to its children.