select variant=listbox not displaying wire:model value

[nicolaslefresne]

Hello!

I'm encountering an issue when using select variant=listbox.

I'm using a livewire component with a $profiles property containing the following sample Eloquent collection that I want to use as a source in a select:

[
    [
        "id" => 1,
        "name" => "profile1",
    ],
    [
        "id" => 2,
        "name" => "profile2",
    ],
]

I also have a property $subscriber_profile_id = 1 matching my first profile.

Consider the basic select example below:

<flux:select label="Profile" wire:model="subscriber_profile_id">
    @foreach ($profiles as $profile)
        <flux:option wire:key="{{ $profile->id }}" value="{{ $profile->id }}">
            {{ $profile->name }}
        </flux:option>
    @endforeach
</flux:select>

It works just fine:

As you can see the $subscriber_profile_id (containing the value 1) is correctly displayed using the wire:model property.

But whenever I use the variant=listbox:

<flux:select label="Profile" variant="listbox" wire:model="subscriber_profile_id">
    @foreach ($profiles as $profile)
        <flux:option wire:key="{{ $profile->id }}" value="{{ $profile->id }}">
            {{ $profile->name }}
        </flux:option>
    @endforeach
</flux:select>

The field does not select the associated select value.

Am I missing something here or is that a bug?

Thank you!

[calebporzio]

Are you on the latest version of Flux? (v1.0.13 I believe) - Just want to make sure we didn't already fix this (I think we did)

[jeffchown]

Hi @calebporzio - I have updated my test app to v1.0.13, cleared my view cache, recompiled assets and deleted any previously published Flux components and the issue still exists for me too.

In my case (in order not to start another issue), I'm using the code from #430 to test which displays the same behaviour (the form is in a modal).

PS Thanks for all of the updates today - you've been busy!

[nicolaslefresne]

Are you on the latest version of Flux? (v1.0.13 I believe) - Just want to make sure we didn't already fix this (I think we did)

Just upgraded from 1.0.12 to 1.0.13 and still have the same issue :)

[seedprod]

Same here.

[calebporzio]

So weird, it's working fine for me (both inside and outside a modal)

What happens when you copy and paste this into your app?

<?php

use Livewire\Volt\Component;

new class extends Component {
    public $profiles = [
        [
            "id" => 1,
            "name" => "profile1",
        ],
        [
            "id" => 2,
            "name" => "profile2",
        ],
    ];

    public $subscriber_profile_id = 1;
};
?>

<div>
    <flux:select label="Profile" variant="listbox" wire:model="subscriber_profile_id">
        @foreach ($profiles as $profile)
            <flux:option wire:key="{{ $profile['id'] }}" value="{{ $profile['id'] }}">
                {{ $profile['name'] }}
            </flux:option>
        @endforeach
    </flux:select>
</div>

[jeffchown]

@calebporzio Your example works.

If you alter it by adding a button that dynamically loads the options array and sets the current option id, the flux:select correctly sets the options (including a check next to the selected one) but it does not show the selected option in the field with dropdown closed.

e.g.

<?php

use Livewire\Volt\Component;

new class extends Component
{
    public $profiles = [];

    public $subscriber_profile_id;

    public function loadAndOpen(): void
    {
        $this->profiles = [
            [
                'id' => 1,
                'name' => 'profile1',
            ],
            [
                'id' => 2,
                'name' => 'profile2',
            ],
        ];

        $this->subscriber_profile_id = 2;
    }
};
?>

<div>
    <flux:button wire:click="loadAndOpen">
        Load Options & Set Default
    </flux:button>

    <flux:select label="Profile" variant="listbox" wire:model="subscriber_profile_id">
        @foreach ($profiles as $profile)
            <flux:option wire:key="{{ $profile['id'] }}" value="{{ $profile['id'] }}">
                {{ $profile['name'] }}
            </flux:option>
        @endforeach
    </flux:select>
</div>

UPDATE: AND, if I use the same code and remove the variant="listbox", while it does display a selected option in the field, it always selects the first option, no matter what I set subscriber_profile_id to.

[kylewallace]

I have been experiencing the same issue as @jeffchown for a few weeks now, regardless of updates. I did a similar test as described above and had the same issue where the value of a wire:model is set dynamically using a button/function/etc. If outputting the value as plain text somewhere I can see it is definitely changing and the select field has the correct value, but it doesn't render the selected value and defaults to the first option as described.

[calebporzio]

Thanks for the report. The problem is/was:

• The select has no options
• A Livewire request both adds them and sets a selected value in one swoop
• When Livewire request returns, the wire:model value is set first
• THEN the DOM is updated with the new options

This causes a native select element to trip up as well as the listbox, just in different ways.

I fixed the listbox with a mutation observer to detect when the options HTML changes and set the "selected" text in the listbox trigger if an option is added that matches the select's internal stateful value.

I know this probably doesn't make a lot of sense, but I'm putting this note here for future me if I ever need to reference it.

Anyhow, the fix has been added and will be in the next release. Thanks.

[jeffchown]

Thanks, @calebporzio ! I think I followed (most ;) of that. Is there a way for us to force a Livewire update programmatically between such assignments?

[jeffchown]

Tested w/ v.1.0.15 = fixed! Thanks, @calebporzio !

[addtobag]

I seem to be getting a very similar issue with combobox.

The customerId i try to mount doesn't show as the selected option on page load.

If i change it to listbox it works.

<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\Customer;

class CustomerSearchTest extends Component
{

    public $search = '';
    public $customerId;

    public function mount() {
        $this->customerId = '6';
    }

    #[\Livewire\Attributes\Computed]
    public function customers() {
        return Customer::query()
            ->when($this->search, fn($query) => $query->where('name', 'like', '%' . $this->search . '%'))
            ->limit(20)
            ->get();
    }

    public function render()
    {
        return view('livewire.customer-search-test');
    }
}

<div>
    {{ $this->customerId }}
    <flux:select wire:model="customerId" variant="combobox" :filter="false">
        <x-slot name="input">
            <flux:select.input wire:model.live="search" />
        </x-slot>
        @foreach ($this->customers as $customer)
            <flux:select.option value="{{ $customer->id }}" wire:key="{{ $customer->id }}">
                {{ $customer->name }} ({{ $customer->id }})
            </flux:select.option>
        @endforeach
    </flux:select>
</div>