F
Filament•6d ago
vahnmarty

Reactivity doesn't work on the frontend when using CheckboxList

I have this checkbox list that has 4 options, and the last one says "None of the above". Here's the logic of the checkboxlist, if i selected 1-3 options, and then clicked the "none of the above", it should uncheck the options and only check the "none of the above". So if the current checked is "none of the above", and I selected the other 3 options, it should automatically uncheck the "none of the above". The code i made is already working, HOWEVER, it's only working on the backend, and not in the display. The $state (in the backend) has the correct values, but in the frontend/html-view, it's showing the wrong checkboxes. 
CheckboxList::make('list')
    ->label('Question here (Check all that apply)')
    ->options([
        'A' => 'A',
        'B' => 'B',
        'C' => 'C',
        'None of the Above' => 'None of the Above',
    ])
    ->live()
    ->required()
    ->afterStateUpdated(function(Livewire $livewire, CheckboxList $component, Get $get, Set $set,  $old, $state){

        $noneString = 'None of the above';

        if (is_array($state)){

            if(in_array($noneString, $old)){
                $selected = array_diff($state, [$noneString]);
            }
            elseif(in_array($noneString, $state)){
                $selected = [$noneString];
            }

            $set($component->getStatePath(), $selected);

            /**
            
            WHAT'S THE CODE HERE? TO LIKE REFRESH THE FORM OR THIS FIELD.

            something like $livewire->refresh()?
            
            **/
        }


    })
CheckboxList::make('list')
    ->label('Question here (Check all that apply)')
    ->options([
        'A' => 'A',
        'B' => 'B',
        'C' => 'C',
        'None of the Above' => 'None of the Above',
    ])
    ->live()
    ->required()
    ->afterStateUpdated(function(Livewire $livewire, CheckboxList $component, Get $get, Set $set,  $old, $state){

        $noneString = 'None of the above';

        if (is_array($state)){

            if(in_array($noneString, $old)){
                $selected = array_diff($state, [$noneString]);
            }
            elseif(in_array($noneString, $state)){
                $selected = [$noneString];
            }

            $set($component->getStatePath(), $selected);

            /**
            
            WHAT'S THE CODE HERE? TO LIKE REFRESH THE FORM OR THIS FIELD.

            something like $livewire->refresh()?
            
            **/
        }


    })
1 Reply
Kenneth Sese
Kenneth Sese•6d ago
@vahnmarty You can accomplish by manipulating the component’s state. No refresh needed. So to uncheck the rest, $component->state([$noneString])

Did you find this page helpful?