livewire-select icon indicating copy to clipboard operation
livewire-select copied to clipboard

fix cascading livewire select inputs nulled after repainting

Open bfiessinger opened this issue 2 years ago • 0 comments

The Problem:

As mentioned in #18 currently while executing the render method all livewire-select component values, which have dependencies, are nulled.

Assuming the following components the car-brand-select would indeed show up with the right (visible) value, but car-model-select would not only have no value, but it would also have no options (because car-brand-select value is actually null)

<livewire:car-brand-select
   name="car_brand_id"
   :value="$initialValue" // optional
   placeholder="Choose a Car Brand" // optional
/>

<livewire:car-model-select
    name="car_model_id"
    placeholder="Choose a Car Model"
    :depends-on="['car_brand_id']"
/>

Solution:

I have added a new property to the livewire component, called initValueEncoded, this value is set on mount the same as the value prop, but json encoded.

why json? Refering to another pull request of mine (#37), it is mandatory that also an array of values can be submitted.

Inside the select.blade.json the value Livewire property can now be set during component initialization:

<div x-init="$wire.set('value', {{ $initValueEncoded }})">

(closes #18)

bfiessinger avatar Aug 28 '21 13:08 bfiessinger