Livewire resets dropdown input

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.

>Solution :

This is happening because you’re using Livewire to bind the input fields and make them dynamic, but the dropdown is still using the traditional form data binding.
To resolve the issue, you can bind the dropdown using Livewire by using the "wire:model" directive instead of the "value" attribute.

Try updating your dropdown code to the following:

<select id="range_project_id" name="project_id" class="px-2 form-select" disabled form="create-land-registry-form" wire:model="selectedProperty">
    <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

And in your Livewire component, define the selectedProperty property:

public $selectedProperty;

This should resolve the issue and prevent the selected dropdown item from being reset when you change the value in the input field.