When dynamically adding livewire-select components to the page, options don't render

[bandgeekndb]

First, a huge thank you for this package, it's awesome and saved me a ton of time not having to build this behavior from scratch.

I'm running into an issue when I'm dynamically adding livewire-select components with dependencies to the page. I have a base Livewire component for the form I'm building and in one section, I am allowing the user to add/remove rows of a table using Livewire. Each row of the table contains a livewire-select component that is dependent on values above in the form.

My issue is, if the livewire-select components are on the page when I change the dependent values, the livewire-select components in the table update perfectly. But, if I choose dependent values above and then add table rows (and therefore livewire-select components) to the page, they won't update their options list until I change the dependent values above again.

Ideally, I'd like a way to force a refresh of the component's options when it appears on the page, but I can't quite figure out how to make that happen. Can anyone guide me towards a solution that already may exist, or a way we might be able to introduce this feature to the package?

Thank you!

[bandgeekndb]

Hi all,

I took another stab at this with a fresh head and I realize the issue. Because the dynamically added components aren't present on the page when the other inputs are selected, they don't receive the "updated" events and update their own internal state for those dependent values.

Unfortunately, I think this means it would be pretty difficult to adapt this package for my use, as I'd have to find a way to call the updateDependingValue method on the component for each dependent value when the new select is being put on the page. I might tinker with this approach, but since my whole form is a Livewire component, I might just wire:model the fields I need data from and when the "add new row" button is clicked, use those values on the base component to generate the options.

I'm going to leave this open until I get back to work next week so I can post my idea of a solution in case anyone stumbles onto this later or if anyone has a better idea that I haven't thought of yet.

Thanks again for an amazing package, I appreciate all the hard work that went into making this pretty darn bulletproof in many cases.

[bfiessinger]

This is kind of a major issue. The problem here is that the $value property is set to null on initialization. When using an input with dependencies the allDependenciesMet methods ofc is falsy because all dependencies values are nulled.

One approach to get this in the right direction might be setting the value on load through alpine.js

file: resources/views/select.blade.php

<div>

    <div x-data="{
        initValue() {
            return $el.querySelector('[name=\'{{$name}}\']').value;
        }
    }" x-init="$wire.set('value', initValue())">
        @if(!$searchable && $shouldShow)
    ...

@asantibanez any other ideas?