#How to customize select option label (different when open/closed)

7 messages · Page 1 of 1 (latest)

stuck pecan
#

Is there a way to have a different render for the "preview" (when the select is closed) and for when the select is open ?

Here is my code

Filament\Forms\Components\Select::make('ethnicity')
    ->label('Groupe ethnique')
    ->native(false)
    ->searchable()
    ->allowHtml()
    ->options(EthnicityEnum::class)
    ->default(EthnicityEnum::EUROPEAN_WHITE)
    ->live()
    ->required(),
image.png
stuck pecan
#

I didn't specify it but the label is defined in my Enum using HasLabel interface and getLabel() method.

clever depot
#

my bad, you said that it is implemented with getLabel, and using allowHtml, make sense.

stuck pecan
#

Any hint ? If it can help, here is my enum code :

<?php

declare(strict_types=1);

namespace App\Enums;

use Filament\Support\Contracts\HasLabel;

enum EthnicityEnum: string implements HasLabel
{
    case AFRICAN_BLACK = 'african_black';
    case ASIAN = 'asian';
    case EUROPEAN_WHITE = 'european_white';
    case HISPANO_LATINO = 'hispano_latino';
    case MIDDLE_EAST_NORTH_AFRICA = 'middle_east_north_africa';
    case INDIGENOUS_AMERICAS = 'indigenous_americas';
    case METIS_MIXED = 'metis_mixed';
    case OCEANIAN = 'oceanian';
    case CARIBBEAN = 'caribbean';
    case OTHER = 'other';

    public function getLabel(): string
    {
        return match ($this) {
            self::AFRICAN_BLACK => 'Africain/Noir',
            self::ASIAN => 'Asiatique',
            self::EUROPEAN_WHITE => <<<HTML
            <div class="flex flex-col">
                <span>Européen/Blanc</span>
                <span class="text-xs text-gray-500 text-wrap">
                    (Caucasien, Américains du Nord, Canadiens, Australiens)
                </span>
            </div>
            HTML,
            self::HISPANO_LATINO => 'Hispano/Latino',
            self::MIDDLE_EAST_NORTH_AFRICA => 'Moyen-Orient et Afrique du Nord',
            self::INDIGENOUS_AMERICAS => 'Amérindien/Autochtone des Amériques',
            self::METIS_MIXED => 'Métis/Mixte (veuillez préciser)',
            self::OCEANIAN => 'Océanien (Polynésien, Mélanésien, etc.)',
            self::CARIBBEAN => 'Caribéen',
            self::OTHER => 'Autre',
        };
    }
}
crystal seal
#

Not out of the box, you could target the css and hide it by default in the select display

stuck pecan