Autofocus after submitting form
I make a custom page and render filament form as below
And handle the form submission as below
When first loading the page the autofocus on Select works well but after submitting and handling with save how can i make select be autofocus again. Is there is a filament way of handling this.
public function form(Form $form): Form
{
return $form
->schema([
Select::make('product_id')
->searchable()
->autofocus()
->label('Search Product')
->getSearchResultsUsing(fn (string $search): array => Product::where('product_name', 'like', "%{$search}%")
->orWhere('barcode', 'like', "%{$search}%")
->limit(20)->pluck('product_name', 'id')->toArray())
->noSearchResultsMessage('No products found.')
->searchPrompt('Search by name or barcode')
->searchingMessage('Searching products...')
->required()
->native(false),
TextInput::make('quantity')
->label('quantity')
->numeric()
->default(1)
->required(),
])->columns(2)
->statePath('data');
}
public function form(Form $form): Form
{
return $form
->schema([
Select::make('product_id')
->searchable()
->autofocus()
->label('Search Product')
->getSearchResultsUsing(fn (string $search): array => Product::where('product_name', 'like', "%{$search}%")
->orWhere('barcode', 'like', "%{$search}%")
->limit(20)->pluck('product_name', 'id')->toArray())
->noSearchResultsMessage('No products found.')
->searchPrompt('Search by name or barcode')
->searchingMessage('Searching products...')
->required()
->native(false),
TextInput::make('quantity')
->label('quantity')
->numeric()
->default(1)
->required(),
])->columns(2)
->statePath('data');
}
public function save(): void
{
try {
$data = $this->form->getState();
$product = Product::find($data['product_id']);
$data = [
'user_id'=> auth()->user()->id,
'product_id' => $product->id,
'quantity' => $data['quantity'],
'cost_price'=>$product->cost_price,
'selling_price' => $product->selling_price,
'discount' =>0,
];
SaleCart::create($data);
$this->updateTotal();
$this->form->fill();
} catch (Halt $exception) {
//throw $th;
}
}
public function save(): void
{
try {
$data = $this->form->getState();
$product = Product::find($data['product_id']);
$data = [
'user_id'=> auth()->user()->id,
'product_id' => $product->id,
'quantity' => $data['quantity'],
'cost_price'=>$product->cost_price,
'selling_price' => $product->selling_price,
'discount' =>0,
];
SaleCart::create($data);
$this->updateTotal();
$this->form->fill();
} catch (Halt $exception) {
//throw $th;
}
}
2 Replies
Below is my blade file
Any help?
<x-filament-panels::page>
<div class="lg:flex">
<div class="w-full lg:w-1/2 p-4">
<x-filament::section>
<x-filament-panels::form wire:submit="save">
{{ $this->form }}
<x-filament-panels::form.actions
:actions="$this->getFormActions()"
/>
</x-filament-panels::form>
</x-filament::section>
<div class="pt-2">
{{ $this->table }}
</div>
</div>
<div class="w-full lg:w-1/2 p-4">
<x-filament::section>
<div class="relative overflow-x-auto">
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-3 text-lg">
Total
</th>
</tr>
</thead>
<tbody>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row" class="px-6 py-4 text-lg text-red-500 whitespace-nowrap">
Rs. {{$this->total}} /-
</th>
<th>
{{$this->checkout}}
</th>
</tr>
</tbody>
</table>
</div>
</x-filament::section>
</div>
</div>
<x-filament-actions::modals />
</x-filament-panels::page>
<x-filament-panels::page>
<div class="lg:flex">
<div class="w-full lg:w-1/2 p-4">
<x-filament::section>
<x-filament-panels::form wire:submit="save">
{{ $this->form }}
<x-filament-panels::form.actions
:actions="$this->getFormActions()"
/>
</x-filament-panels::form>
</x-filament::section>
<div class="pt-2">
{{ $this->table }}
</div>
</div>
<div class="w-full lg:w-1/2 p-4">
<x-filament::section>
<div class="relative overflow-x-auto">
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-3 text-lg">
Total
</th>
</tr>
</thead>
<tbody>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row" class="px-6 py-4 text-lg text-red-500 whitespace-nowrap">
Rs. {{$this->total}} /-
</th>
<th>
{{$this->checkout}}
</th>
</tr>
</tbody>
</table>
</div>
</x-filament::section>
</div>
</div>
<x-filament-actions::modals />
</x-filament-panels::page>
You would have to use JS to focus the element after submit since it’s not a page reload.