Question 15842 in Laravel Question posted in
The official Laravel Documentation can be found here.

Livewire resets dropdown input – Laravel

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:

(![gif on the issue](https://i.imgur.com/FbbuiN7.gif))

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 (AppModelsProject::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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    As you are using the raw HTML select and not a third party library, like Select2, my question is, why not bind the select value to the livewire component like so?

    This would solve your problem and the component would be aware of the value from the get go.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search