I have a dropdown in a livewire component that I'm using a change event to enable/disable a second input field. The change event is working, and it's sent to the server, and updated in the database, however, after the change event fires, it immediately changes the dropdown selected value back to the original one. I can't figure out why it's doing that.
Here's the code in my blade view:
<div class="row">
<div class="mb-3 col-md-4">
<x-input.group label="Legal Entity" for="legal_entity_type_id" :error="$errors->first('companyDetail.legal_entity_type_id')">
<x-input.select wire:model.defer="companyDetail.legal_entity_type_id" wire:change="entitySelected" id="legal_entity_type_id" for="legal_entity_type_id" label="Legal Entity">
@foreach ($legalEntities as $entity)
<option name="{{ $entity->name }}" id="{{ $entity->id }}" value="{{ $entity->id }}" wire:key="{{ $entity->id }}" @if (isset($companyDetail->legal_entity_type_id) && $companyDetail->legal_entity_type_id === $entity->id) selected @endif>
{{ $entity->name }}
</option>
@endforeach
</x-input.select>
</x-input.group>
</div>
<div class="mb-3 col-md-5">
<x-input.group label="Legal Entity If Other" for="legal_entity_description_if_other" :error="$errors->first('companyDetail.legal_entity_description_if_other')">
<x-input.text wire:model.defer="companyDetail.legal_entity_description_if_other" isDisabled="{{ !$enableOtherLegalEntity }}" id="legal_entity_description_if_other" name="legal_entity_description_if_other" value="{{ $companyDetail->legal_entity_description_if_other ?? '' }}" />
</x-input.group>
</div>
</div>
Here's the component code:
class CompanyDetail extends Component
{
public LocationDetail $companyDetail;
public $legalEntities;
public $smsTypes;
public $enableOtherLegalEntity;
protected $rules = [
'companyDetail.legal_entity_type_id' => 'required|exists:legal_entity_types,id',
'companyDetail.legal_entity_description_if_other' => 'required_if:legal_entity_type_id, ==, 6',
'companyDetail.sms_type_id' => 'required|exists:sms_types,id',
'companyDetail.rent_amount' => 'numeric',
'companyDetail.ein' => 'numeric|max:999999999'
];
public function mount(LocationDetail $companyDetail)
{
$this->companyDetail = $companyDetail;
$this->smsTypes = SmsType::all();
$this->legalEntities = LegalEntityType::all();
$this->enableOtherLegalEntity = ($this->companyDetail['legal_entity_type_id'] == 6);
}
public function render()
{
return view('livewire.locations.company-detail');
}
public function entitySelected()
{
$this->enableOtherLegalEntity = ($this->companyDetail['legal_entity_type_id'] == 6);
}
public function save()
{
$this->validate();
$this->companyDetail->save();
$this->companyDetail->refresh();
$this->dispatchBrowserEvent('closeModal');
}
}