Select list losing selected item - DOM Diff issue?

#1

What seems to be the problem:
I’ve got a select list that’s updating an eloquent model on change. The selected value is set by a comparison in the option list loop between the option ID and the current ID. This comparison works on update and I can see the “selected” text outside the option tag, but the same comparison inside the option tag does not actually set the HTML.

Steps to Reproduce:

Change select option, let model update, watch as select is blank, the updated option is not selected, but “selected” text can be seen next to the appropriate option in HTML inspector (F12). I’ve tried to set a wire:key as it’s probably a DOM diffing issue. But I’ve seen this behaviour before on a different component and just left it as it kind of works

Are you using the latest version of Livewire:
yes, 2.2.7 or smth
Do you have any screenshots or code examples:

dropdown.blade.php:



@foreach($statuses as $status)
{{$current_status_id}} {{($current_status_id == $status->id ? ‘selected’ : ‘’)}}
id}} {{($current_status_id == $status->id ? ‘selected’ : ‘’)}}>{{$status->name}}
@endforeach

DropDown.php:
public MachineInstance $machine_instance;
public $current_status_id;
public $statuses;

protected $rules = [
    'machine_instance.status_id' => 'exists:App\Models\Status,id'
];

public function render()
{
    $this->current_status_id = $this->machine_instance->status_id;
    return view('livewire.machine-state-dropdown');
}

public function mount(MachineInstance $machine, $statuses){
    $this->machine_instance = $machine;
    $this->statuses = $statuses;
}

public function save(){
    $this->validate();
    $this->machine_instance->save();
}