livewire / flux

The official Livewire UI component library
396 stars 36 forks source link

Placeholder attribute doesn't work in select elements with dynamically generated options #333

Open jlevers opened 12 hours ago

jlevers commented 12 hours ago

Problem

When using a select box with dynamically generated options and a model key attached, the placeholder field is not applied, and the first option in the select appears in the select box in a disabled state.

Code to reproduce

Blade template

<div class="mx-auto flex items-center w-1/2 mt-8 p-12 bg-white">
    <flux:select
        wire:model="selectedColor"
        placeholder="Choose a color..."
        :filter="false"
    >
        @foreach ($colors as $color)
        <flux:option wire:key="{{ $color }}" value="{{ $color }}">{{ $color }}</flux:option>
        @endforeach
    </flux:select>
</div>

Livewire component

<?php

namespace App\Livewire;

use Livewire\Component;

class ColorPicker extends Component
{
    public array $colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink', 'brown', 'gray'];
    public string $selectedColor;

    public function render()
    {
        return view('livewire.color-picker');
    }
}

Here's how this renders:

Image

I can fake a placeholder with the code below, but would expect the placeholder attribute to still work if I'm passing dynamic options.

<div class="mx-auto flex items-center w-1/2 mt-8 p-8 bg-white">
    <flux:select
        wire:model="selectedColor"
        :filter="false"
    >
        <flux:option value="" disabled selected>Choose a color...</flux:option>
        @foreach ($colors as $color)
        <flux:option wire:key="{{ $color }}" value="{{ $color }}">{{ $color }}</flux:option>
        @endforeach
    </flux:select>
</div>
<?php

namespace App\Livewire;

use Livewire\Component;

class ColorPicker extends Component
{
    public array $colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink', 'brown', 'gray'];
    public string $selectedColor = '';

    public function render()
    {
        return view('livewire.color-picker');
    }
}

Image

jeffchown commented 11 hours ago

@jlevers If you set the default value of $selectedColor to '' (e.g. public string $selectedColor = ''; in the component), the placeholder should be displayed (works in my test using your initial code) without the need for the <flux:option value="" disabled selected>Choose a color...</flux:option>