🐈‍⬛

"部分的未解決"：laravel10/filament v3 でSelectのoptionを無効化する方法を使ってみた

2024/01/28に公開

filament

laravel10

tech

Selectのoptionを無効化する方法を使ってみた

Selectを複数使う時があり、Select1で選んだoptionはSlect2では無効化されている動きを実現したいので、試しにドキュメントに記載されたコードを使ってみた

filament3の部分的な無効化の詳しいことは公式ドキュメントを参照してください。

早速使ってみた

You can disable specific options using the disableOptionWhen() method. It accepts a closure, in which you can check if the option with a specific $value should be disabled:

disableOptionWhen()を使うと実現できるみたいです。

使用例：

use Filament\Forms\Components\ToggleButtons;
 
ToggleButtons::make('status')
    ->options([
        'draft' => 'Draft',
        'scheduled' => 'Scheduled',
        'published' => 'Published',
    ])
    ->disableOptionWhen(fn (string $value): bool => $value === 'published')

自分のコードに置き換えてみた

Select::make('character1')
    ->required()
    ->label('キャラクター1')
    ->options(Style::all()->mapWithKeys(function ($character1) {
        return [$character1->id => "{$character1->character->name} : ({$character1->style_name})"];
    }))
    ->searchable()
    ->live(),

Select::make('character2')
    ->required()
    ->label('キャラクター2')
    ->options(Style::all()->mapWithKeys(function ($character2) {
        return [$character2->id => "{$character2->character->name} : ({$character2->style_name})"];
    }))
    ->searchable()
    ->live()
    ->disableOptionWhen(fn (Get $get): bool => $get('character1') !== '1'),

動かない。。。

githubでfilamentリポジトリのissueとかを確認してみよう。

Discussionsに記載されていました。

2023年9月のコメントで

Just found that if searchable() is used then the disableOptionWhen() does not work. So now if I remove searchable() is works so its a partial answer.
Would be good to be able to used searchable() with it.

chatgpt翻訳

earchable()を使用するとdisableOptionWhen()が機能しないことがわかりました。ですから、searchable()を取り除くと機能するので、これは部分的な解決策です。
searchable()を使いながらもdisableOptionWhen()を使えると良いのですが。

searchable()と一緒に使えないのですね。。。

searchable()を外してみた

Select::make('character1')
    ->required()
    ->label('キャラクター1')
    ->options(Style::all()->mapWithKeys(function ($character1) {
        return [$character1->id => "{$character1->character->name} : ({$character1->style_name})"];
    }))
    ->live(),

Select::make('character2')
    ->required()
    ->label('キャラクター2')
    ->options(Style::all()->mapWithKeys(function ($character2) {
        return [$character2->id => "{$character2->character->name} : ({$character2->style_name})"];
    }))
    ->live()
    ->disableOptionWhen(fn (Get $get): bool => $get('character1') !== '1'),

動いた。。。

最後に

searchable()とdisableOptionWhen()のところ共存できないそうです。(2024/01/28時点)
非常に残念です。
実現可能な方法をご存知の方はコメントください。
よろしくお願いします。