<flux:option> value must be an integer? [Uncaught Could not find option for value]

[magarrent]

Hi there! 👋

I'm trying to create a dynamic Select listbox.
But when the option value is a string (like uuid or something else), there is some JS crashing:

retrying...
Uncaught Could not find option for value "9d133cdc-100b-4fa6-b32a-2c7be9de71d6"

I've tried using a number and it works, it's just with a string values.

This is my current code, but you can try any OPTION with a string value:

value="{{ $variant['uuid'] }}"

<flux:select wire:model="selectedVariantUuid"
             variant="listbox"
             :filter="false"
             wire:key="variant-select-{{ $categoryName }}"
             placeholder="Choose variant...">
    @foreach($variants as $pos => $variant)
        <flux:option
            class="cursor-pointer"
            value="{{ $variant['uuid'] }}"
            @mouseover="hoverVariant('{{ $variant['uuid'] }}')"
            @mouseout="hoverVariant(null)"
            data-variant-id="{{ $variant['uuid'] }}">
            {{ $variant['name'] }}
        </flux:option>
    @endforeach
</flux:select>

flux.js error

[jeffchown]

@magarrent Have you tried it with :value="$variant['uuid']" instead?

[magarrent]

@magarrent Have you tried it with :value="$variant['uuid']" instead?

Yep! Also with filter false/true on select (Don't know exactly what it does)

[jeffchown]

@magarrent I tried to emulate your code with a simplified version of the code and it works OK for me.
Can you try this? (and see if you still get the error):

@php
    $options = [
        ['value' => 'a', 'label' => 'First (A)'],
        ['value' => 'b', 'label' => 'Second (B)'],
        ['value' => 'c', 'label' => 'Third (C)'],
        ['value' => 'd', 'label' => 'Fourth (D)'],
    ];
@endphp

<flux:select placeholder="Choose industry...">
    @foreach ($options as $option)
        <flux:option value="{{ $option['value'] }}">{{ $option['label'] }}</flux:option>
    @endforeach
</flux:select>

I would also recommend trying your code without the @mouseover and @mouseout lines as well to see if they are causing the error.

[jeffchown]

@magarrent filter is for dynamically generated options. In your case, if your $variants are dynamically generated between each render, :filter should be false, otherwise leave it as its default (true). :filter="false" is usually most useful in combination with searchable.