autofocus() not working

Hello, I have this on a resource class:

public static function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('title')->required()->maxLength(255)->autofocus(),
                Hidden::make('owner_id')->default(auth()->id()),
            ]);
    }

public static function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('title')->required()->maxLength(255)->autofocus(),
                Hidden::make('owner_id')->default(auth()->id()),
            ]);
    }

I have a page action on the list resource page for creating new resources that uses the pre-defined CreateAction class. could that be preventing it? let me know if you need more info, cheers.

1 Reply

backtrackjackOP•16mo ago

both create and edit actions produce modal forms as intended, just the autofocus isn't focusing My solution on a custom component that uses filament forms is this:

//in form schema
TextInput::make('...')
  ->extraAlpineAttributes([
    'x-ref' => 'input',
    '@focus-input.window' => '$nextTick(() => { $refs.input.focus(); } )',
])

//callback of action button
public function doAction()
{
  //perform action
  //...
  $this->dispatchBrowserEvent('focus-input');
}

//in form schema
TextInput::make('...')
  ->extraAlpineAttributes([
    'x-ref' => 'input',
    '@focus-input.window' => '$nextTick(() => { $refs.input.focus(); } )',
])

//callback of action button
public function doAction()
{
  //perform action
  //...
  $this->dispatchBrowserEvent('focus-input');
}

however trying to do it on a panel page doesn't seem to work the same way. I feel like it has something to do with the lifecycle hooks timing?

class ListMatters extends ListRecords
{
    protected static string $resource = MatterResource::class;

    protected function getActions(): array
    {
        return [
            Actions\CreateAction::make()
                ->disableCreateAnother()
                ->afterFormFilled(function() {
                    $this->dispatchBrowserEvent('focus-matter-title-input');
                })
                ->after(fn (Model $record) => redirect("/matters/$record->id")),
        ];
    }
}

class ListMatters extends ListRecords
{
    protected static string $resource = MatterResource::class;

    protected function getActions(): array
    {
        return [
            Actions\CreateAction::make()
                ->disableCreateAnother()
                ->afterFormFilled(function() {
                    $this->dispatchBrowserEvent('focus-matter-title-input');
                })
                ->after(fn (Model $record) => redirect("/matters/$record->id")),
        ];
    }
}

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('title')->required()->maxLength(255)
                    ->extraAlpineAttributes([
                        'x-ref' => 'matter-title-input',
                        '@focus-matter-title-input.window' => '$nextTick(() => { $refs.matter-title-input.focus(); } )',
                    ]),
                Hidden::make('owner_id')->default(auth()->id()),
            ]);
    }

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('title')->required()->maxLength(255)
                    ->extraAlpineAttributes([
                        'x-ref' => 'matter-title-input',
                        '@focus-matter-title-input.window' => '$nextTick(() => { $refs.matter-title-input.focus(); } )',
                    ]),
                Hidden::make('owner_id')->default(auth()->id()),
            ]);
    }

Gaming

Programming

autofocus() not working