Livewire resets dropdown input

Question

Context

I have a form built fully using a livewire component because I need to bind several inputs to do real-time calculations. I expect the dropdown items not to change, but the text input fields need to be dynamic.

Problem

when I enter a value into a binded <input> field, the previously selected items in the <select> dropdown gets reset. Gif of the issue:

()

I tried using the "old('VALUE')" function, but it appears to have no effect.

This is the code of "project" selector input (The stage selector code is identical):

<select id="range_project_id" name="project_id" value="{{ old('project_id') }}"
   class="px-2 form-select" disabled   form="create-land-registry-form">
   <option  selected>Choose a project..</option>
   <option disabled>{ID}:{Name}</option>
   @foreach (App\Models\Project::all() as $project)
   <option value="{{ $project->id }}">
      {{ $project->id . ': ' . $project->name }}
   </option>
   @endforeach
</select>

This is the code of one of the range selectors:

<div class="row">
   <input wire:model.lazy="landRangeStart" type="text" name="land_id_start"
   id="land_range_start" disabled  form="create-land-registry-form" 
   class="col-3 form-control-lg border mx-2"  placeholder="Starting from"
   value="{{ old('land_id_start') }}" />
</div>

I tried using the "old('VALUE')" function, but it appears to have no effect.

Answer 1

In the parent div, add wire:ignore.self. For example:

<div wire:ignore.self><-- Parent div -->
//Your other dropdown code in here
</div>

This directive tells Livewire to ignore changes to a subset of HTML within your component.