Modal Action halt and autofocus

I have a modal action with one input field. When opening the modal, it should autofocus this input. After the action is done, it should reset the form and autofocus the input again.

With

$form->fill()

$form->fill()

and

$action->halt()

$action->halt()

I can clear the form and keep it open, but the input isn't autofocused?

Action::make('einbuchen')
    ->form([
        TextInput::make('code')
            ->autofocus()
            ->required()
    ])
    ->action(function (array $data, self $livewire, Action $action, Form $form) {
        // custom logic...
        // ...
        $form->fill();
        $action->halt();
    })

Action::make('einbuchen')
    ->form([
        TextInput::make('code')
            ->autofocus()
            ->required()
    ])
    ->action(function (array $data, self $livewire, Action $action, Form $form) {
        // custom logic...
        // ...
        $form->fill();
        $action->halt();
    })

Solution

try this

->action(function (array $data, self $livewire, Action $action, Form $form) {
    $form->fill();
    $livewire->js("document.getElementById('{$form->getStatePath()}.code').focus()");
    $action->halt();
}),

->action(function (array $data, self $livewire, Action $action, Form $form) {
    $form->fill();
    $livewire->js("document.getElementById('{$form->getStatePath()}.code').focus()");
    $action->halt();
}),

Jump to solution

Filament•9mo ago•

3 replies

bernhard

Modal Action halt and autofocus

I have a modal action with one input field. When opening the modal, it should autofocus this input. After the action is done, it should reset the form and autofocus the input again.

With

$form->fill()

$form->fill()

and

$action->halt()

$action->halt()

I can clear the form and keep it open, but the input isn't autofocused?

Action::make('einbuchen')
    ->form([
        TextInput::make('code')
            ->autofocus()
            ->required()
    ])
    ->action(function (array $data, self $livewire, Action $action, Form $form) {
        // custom logic...
        // ...
        $form->fill();
        $action->halt();
    })

Action::make('einbuchen')
    ->form([
        TextInput::make('code')
            ->autofocus()
            ->required()
    ])
    ->action(function (array $data, self $livewire, Action $action, Form $form) {
        // custom logic...
        // ...
        $form->fill();
        $action->halt();
    })

Solution

try this

->action(function (array $data, self $livewire, Action $action, Form $form) {
    $form->fill();
    $livewire->js("document.getElementById('{$form->getStatePath()}.code').focus()");
    $action->halt();
}),

->action(function (array $data, self $livewire, Action $action, Form $form) {
    $form->fill();
    $livewire->js("document.getElementById('{$form->getStatePath()}.code').focus()");
    $action->halt();
}),

Jump to solution

Modal Action halt and autofocus

Modal Action halt and autofocus

Similar Threads

Similar Threads

Similar Threads