[FIXED] Livewire uncaught (in promise) DOMException with select

Issue

I have a dropdown in my component that seems to be causing an error in Livewire.

Uncaught (in promise) DOMException: Failed to execute 'setAttribute' on 'Element': '?' is not a valid attribute name.

I added the wire:key code based on what I read in the docs under the troubleshooting section, but it didn't seem to help. It updates the value on save just like it should, but when it refreshes the dom with the new data, it's not working.

Here's the offending element:

<div class="mb-3 col-md-4 ">
    <label for="state" class="form-label">State</label>
    <select wire:model.defer="location.state" class="form-select" 
        id="state" name="state">
        @foreach ($states as $state)
            <option 
                name="{{ $state->name }}" 
                id="{{ $state->code }}" 
                wire:key="{{ $state->id }}"
                value="{{ $state->code }}"
                @if (isset($location->state) 
                    && $location->state === $state->code) ? selected @endif
            >{{ $state->name }}
            </option>
        @endforeach
    </select>
</div>

Solution

You have a typo here,

@if (isset($location->state) && $location->state === $state->code) 
    ? selected 
@endif

Where it tries to apply ? as an attribute on the element, but ? is not a valid attribute. Just remove the ?.

---

That said, you cannot use the selected property on <select> elements in Livewire to set the selected value. You need to set the value of your wire:model in your component. This means that you have to remove the @if(..) selected @endif from your Blade entirely, and instead set the value in your component,

public function mount() {
    $this->location['state'] = $state->code;
}

Answered By - Qirel