Filament•2w ago

ToggleButtons are requiring a double-click to change their state

On Edit form i have this issue - ToggleButtons are requiring a double-click to change their state. On Create form it is Ok. What can cause this issue?

15 Replies

Brian Kidd•2w ago

Is it a boolean? It almost sounds like the value coming from the db isn’t what the form component is expecting? Can you give more details about how it is stored in the db? Do you have any casts on the model?

ArshavirOP•2w ago

No it is not boolean, casting array I just noted on first click it focuses on other textinput field which is filled, if I clear and than click toggle button it focuses another filled textinput, if all text inputs are empty, toggle buttons clicks works as expected

LeandroFerreira•2w ago

console errors?

ArshavirOP•2w ago

No console errors, if textinput empty works, when filled not working

ArshavirOP•2w ago

ArshavirOP•2w ago

if Aaa empty toggles working fine, when filling with text, when click toggle button Aaa focuses, and not working, need to doubleclick this is my form

return $form
            ->schema([
                    Forms\Components\TextInput::make('aaa')
                    ->default('aaaaaa'),
                Forms\Components\ToggleButtons::make('lecturer_type')
                    ->inline()
                    ->multiple()
                    ->default(["practice"])
                    ->options([
                        'practice' => __('Practice'),
                        'lecture' => __('Lecture')
                    ])
                    ->colors([
                        'practice' => 'info',
                        'lecture' => 'warning',
                    ])
                    ->icons([
                        'practice' => 'heroicon-o-pencil',
                        'lecture' => 'heroicon-o-check-circle',
                    ])
                    ->required(),
            ]);

return $form
            ->schema([
                    Forms\Components\TextInput::make('aaa')
                    ->default('aaaaaa'),
                Forms\Components\ToggleButtons::make('lecturer_type')
                    ->inline()
                    ->multiple()
                    ->default(["practice"])
                    ->options([
                        'practice' => __('Practice'),
                        'lecture' => __('Lecture')
                    ])
                    ->colors([
                        'practice' => 'info',
                        'lecture' => 'warning',
                    ])
                    ->icons([
                        'practice' => 'heroicon-o-pencil',
                        'lecture' => 'heroicon-o-check-circle',
                    ])
                    ->required(),
            ]);

Filament version is v3.2.115, PHP 8.2, Laravel 11 updated Filament to latest version, problem not solved! Also please note that happened on modal form only, on relation managers

Adam Holmes•2w ago

This sounds similar to what I was experiencing with actions here: https://discord.com/channels/883083792112300104/1296415497037938729/1296437496288116746 @ChesterS made the suggestion of setting lazy = true which did the trick for me - maybe you can try that Sadly, no explanation why this works, but it did 😂

toeknee•2w ago

You are using the form builder... have you filled the form? Livewire requires double clicking on first load if it hasn't been filled

ArshavirOP•2w ago

When filled, toggle buttons not workin on single click and works when empty textfields But I am in RelationManager:

class LecturersRelationManager extends RelationManager
...

class LecturersRelationManager extends RelationManager
...

Tried

protected static bool $isLazy = true;

protected static bool $isLazy = true;

no luck Any suggestion?

BearRoot•2w ago

Have you asked Claude?

return $form
    ->schema([
        Forms\Components\TextInput::make('aaa')
            ->default('aaaaaa')
            ->disableAutoComplete(), // Add this to prevent focus stealing
        
        Forms\Components\ToggleButtons::make('lecturer_type')
            ->inline()
            ->multiple()
            ->default(["practice"])
            ->options([
                'practice' => __('Practice'),
                'lecture' => __('Lecture')
            ])
            ->colors([
                'practice' => 'info',
                'lecture' => 'warning',
            ])
            ->icons([
                'practice' => 'heroicon-o-pencil',
                'lecture' => 'heroicon-o-check-circle',
            ])
            ->required()
            ->afterStateUpdated(function ($state) {
                // Force immediate state update
                $this->validateField('lecturer_type');
            }),
    ])
    ->beforeFill(function ($form) {
        // Ensure clean state before filling
        $form->getRecord()->setAttribute('lecturer_type', []);
    });

return $form
    ->schema([
        Forms\Components\TextInput::make('aaa')
            ->default('aaaaaa')
            ->disableAutoComplete(), // Add this to prevent focus stealing
        
        Forms\Components\ToggleButtons::make('lecturer_type')
            ->inline()
            ->multiple()
            ->default(["practice"])
            ->options([
                'practice' => __('Practice'),
                'lecture' => __('Lecture')
            ])
            ->colors([
                'practice' => 'info',
                'lecture' => 'warning',
            ])
            ->icons([
                'practice' => 'heroicon-o-pencil',
                'lecture' => 'heroicon-o-check-circle',
            ])
            ->required()
            ->afterStateUpdated(function ($state) {
                // Force immediate state update
                $this->validateField('lecturer_type');
            }),
    ])
    ->beforeFill(function ($form) {
        // Ensure clean state before filling
        $form->getRecord()->setAttribute('lecturer_type', []);
    });

LeandroFerreira•2w ago

Are you able to create a minimal repo on github to reproduce this issue and share it? I can take a look

ArshavirOP•2w ago

Ok will do it

LeandroFerreira•2w ago

let me know

ArshavirOP•7d ago

Sure I'm creating new repo for Leandro, and what I noted on the way If RelationManagers more than one, toggle buttons not working on modal and if only one RelationManager toggle buttons working as expected

LeandroFerreira•7d ago

can you share the repo please?

Gaming

Programming

ToggleButtons are requiring a double-click to change their state