Set focus on a form field after action

[MagicDidou]

Package

Form builder

Package Version

v3.2

How can we help you?

Hi all,

I'm working on a project since couple months now and I'm solving some ergonomics and aesthetic points. I have a page handling a Form which is used to populate a Table displayed below the form (without redrawing the page because it makes user loosing too much time).

To do that I have an Action button which creates a record in the DB and then clears fields for a new entry. But I would like the focus being on the first field of the Form after record save operation. The ->autofocus() only works for the page creation.

Here is the code :

                ->schema([
                    TextInput::make('designation')
                        ->label('Désignation')
                        ->columnSpan(2)
                        ->required()
                        ->autofocus(),
                    Select::make('account')
                        ->columnSpan(2)
                        ->label('Compte')
                        ->searchable()
                        ->options(Account::orderBy('number')->get()->pluck('full_designation', 'id') )
                        ->required(),
                    TextInput::make('unitary_price')
                        ->label('Prix unitaire')
                        ->suffix('€')
                        ->numeric()
                        ->inputMode('decimal'),
                    TextInput::make('quantity')
                        ->label('Quantité')
                        ->numeric()
                        ->inputMode('decimal'),
                    TextInput::make('client_invoice_id')
                        ->hidden()
                        ->default( function(Request $request) { return $request->get('client_invoice_id') ; }),
                    // The action to add a line to the invoice
                    \Filament\Forms\Components\Actions::make([
                        Action::make('Ajouter')
                            ->icon('heroicon-s-plus-circle')
                            ->label('Ajouter')
                            ->keyBindings(['return'])
                            ->action( function(Request $request, Component $component) {
                                if (( $this->designation == null ) ||
                                    ( $this->account == null ) ||
                                    ( $this->unitary_price == null ) ||
                                    ( $this->quantity == null ))
                                {
                                    Notification::make()
                                        ->title('Champs obligatoires')
                                        ->danger()
                                        ->body('Veuillez renseigner tous les champs.')
                                        ->send();
                                    return;
                                }
                                $sil = new ClientInvoiceLine() ;
                                $sil->designation = $this->designation;
                                $sil->account_id = $this->account;
                                $sil->unitary_price = $this->unitary_price;
                                $sil->quantity = $this->quantity;
                                $sil->client_invoice_id = $this->client_invoice_id ;
                                $sil->save();
                                $this->designation = null ;
                                $this->account = null ;
                                $this->unitary_price = null ;
                                $this->quantity = null ;
                                // !!!
                                // HERE  ! I would like to focus on [designation] field
                            })
                    ])

Any idea how to do that ?

Did

[leandrocfe]

TextInput::make('designation')
    ->id('designation')
    ...

use Filament\Pages\Page;
..

Actions\Action::make('Ajouter')
    ->action(function () { ... })
    ->after(function (Page $livewire) {
        $livewire->js('document.getElementById(\'designation\').focus()');
    })

[MagicDidou]

I've tried your modification but I don't know why, it doesn't work... Here is the full code:

                ->schema([
                    TextInput::make('designation')
                        ->id('designation')
                        ->label('Désignation')
                        ->columnSpan(2)
                        ->required()
                        ->autofocus(),
                    TextInput::make('unitary_price')
                        ->label('Prix unitaire')
                        ->suffix('€')
                        ->numeric()
                        ->inputMode('decimal'),
                    TextInput::make('quantity')
                        ->label('Quantité')
                        ->numeric()
                        ->inputMode('decimal'),
                    TextInput::make('weight')
                        ->label('Poids')
                        ->numeric()
                        ->suffix('kg')
                        ->inputMode('decimal'),
                    TextInput::make('memo')
                        ->label('Memo'),
                    TextInput::make('supplier_order_id')
                        ->hidden()
                        ->default( function(Request $request) { return $request->get('supplier_order_id') ; }),
                    // The action to add a line to the order
                    \Filament\Forms\Components\Actions::make([
                        Action::make('Ajouter')
                            ->icon('heroicon-s-plus-circle')
                            ->label('Ajouter')
                            ->keyBindings(['return'])
                            ->action( function(Request $request, Component $component) {
                                if (( $this->designation == null ) ||
                                    ( $this->weight == null ) ||
                                    ( $this->unitary_price == null ) ||
                                    ( $this->quantity == null ))
                                {
                                    Notification::make()
                                        ->title('Champs obligatoires')
                                        ->danger()
                                        ->body('Veuillez renseigner tous les champs.')
                                        ->send();
                                    return;
                                }
                                // Look for the max index for this order
                                $index = SupplierOrderLine::where('supplier_order_id' , '=', $this->supplier_order_id)->max('index') ;
                                if ( $index == null ) $index = 0 ;
                                $sil = new SupplierOrderLine() ;
                                $sil->designation = $this->designation;
                                $sil->weight = $this->weight;
                                $sil->memo = $this->memo;
                                $sil->unitary_price = $this->unitary_price;
                                $sil->quantity = $this->quantity;
                                $sil->supplier_order_id = $this->supplier_order_id ;
                                $sil->index = $index + 1;
                                $sil->save();
                            })
                        ->after(function(Page $livewire) {
                            $livewire->js('document.getElementById(\'designation\').focus()');
                    })
                    ])->verticalAlignment(VerticalAlignment::End)
                    ->alignment(Alignment::Center)
            ])
        ] ) ;
    }

[MagicDidou]

My two cents... It works perfectly (wasn't testing on the right page... 🫤

Thanks !