Filament•2y ago

Select component disabled is not reactive, but the hint is

I have a select component that is reactive and checks the value of a hidden field to determine some of the configuration, include disabled and hint. The hint is working but the disabled is not

Hidden::make('allowCombination')
    ->reactive()
    ->default(false),
Select::make('combinationMeals')
    ->columnSpanFull()
    ->multiple()
    ->reactive()
    ->label('Additions (Packaged with the Protein)')
    ->disabled(function (callable $get) {
        $allow = $get('allowCombination');
        if($allow) {
            return false;
        }
        return true;
    })
    ->hint(function (callable $get) {
        $allow = $get('allowCombination');
        if($allow) {
            return '';
        }
        return "Select 'Individual' packaging type to include additional options";
    })

Hidden::make('allowCombination')
    ->reactive()
    ->default(false),
Select::make('combinationMeals')
    ->columnSpanFull()
    ->multiple()
    ->reactive()
    ->label('Additions (Packaged with the Protein)')
    ->disabled(function (callable $get) {
        $allow = $get('allowCombination');
        if($allow) {
            return false;
        }
        return true;
    })
    ->hint(function (callable $get) {
        $allow = $get('allowCombination');
        if($allow) {
            return '';
        }
        return "Select 'Individual' packaging type to include additional options";
    })

Does the disabled configuration not update after it is initially rendered?

4 Replies

Dennis Koch•2y ago

I think this is a known issue that we cannot disabled the select plugin anymore after it’s initiazed

bwurtz999OP•2y ago

Got it thanks. I'll find a workaround. Probably initialize two select fields, and then toggle hidden based on when I need them Will hidden respond to changes? For a select? Or visible? Is one better to use than the other?

Kenneth Sese•2y ago

This solution, while not ideal, is a good, hacky, workaround, for these types of alpine/js issues. A solution like this worked as well for working around the issues with masks. It works because it basically forces the component to re-render. And yes, hidden or visible will work. Either one. Whichever seems cleaner to you

bwurtz999OP•2y ago

Thank you!

Gaming

Programming

Select component disabled is not reactive, but the hint is