CODEWITHSUNDEEP
laravellaravel-8laravel-livewire
hyphen
hyphen

Reputation: 3450

Livewire uncaught (in promise) DOMException with select

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>

Upvotes: 0

Views: 1838

Answers (2)

daniel Warui
daniel Warui

Reputation: 336

I have experienced the same error - on my part it was solved by calling the livewire component in a authenticated context- it was failing because it was calling login (as a result of being called from a guest context)

If it doesn't work for you please ignore but it sorted me out.

Upvotes: 0

Qirel
Qirel

Reputation: 26490

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;
}

Upvotes: 1

Related Questions