Filament•14mo ago

Focus on Action Modal open?

Hi, is it possible to focus a form field after a action modal is opened? I use AlpineJS dispatch an Event which opens the Modal and I'm able to pass in the name of the field which is needed to be focused. But I'm not sure if it's possible currently, I know I can execute PHP code when the modal is opened. However I probably need to execute some JS. I also tried using ->autofocus() on the form fields with a Closure that checks which field to focus, like:

->autofocus(fn() => $this->autofocus === 'field-name')

->autofocus(fn() => $this->autofocus === 'field-name')

But autofocus seems not to do anything in modals.

5 Replies

SkryptOP•14mo ago

So a solution is to dispatch an event after the action is mounted, listen for it in AlpineJS and focus it manually. 👍

tjodalv•14mo ago

@Lukas Frey Can you provide an example how to autofocus field when modal opens. I have the same requirement. In my case I am using createOptionForm() method on Select field and would like to autofocus field in that createOptionForm(). I've tried like this but it is not working:

Forms\Components\Select::make('inbound_invoice_id')
    ->label('Inbound invoice no.')
    ->required()
    ->relationship(
        name: 'invoice',
        titleAttribute: 'invoice_number'
    )
    ->searchable()
    ->preload()
    ->createOptionModalHeading('Create new invoice')
    ->createOptionForm(fn (Get $get) => [
        // I want this field to be in focus when modal is opened
        // ->autofocus() method doesn't work here.
        Forms\Components\TextInput::make('invoice_number')
            ->label('Račun br.')
            ->required()
            ->autofocus(),
    ])

Forms\Components\Select::make('inbound_invoice_id')
    ->label('Inbound invoice no.')
    ->required()
    ->relationship(
        name: 'invoice',
        titleAttribute: 'invoice_number'
    )
    ->searchable()
    ->preload()
    ->createOptionModalHeading('Create new invoice')
    ->createOptionForm(fn (Get $get) => [
        // I want this field to be in focus when modal is opened
        // ->autofocus() method doesn't work here.
        Forms\Components\TextInput::make('invoice_number')
            ->label('Račun br.')
            ->required()
            ->autofocus(),
    ])

SkryptOP•14mo ago

Hi. So in my case it was an Action with a form, so I could use hook into mountUsing. I'm not sure if you can do that with a Select form too, but if yes, then this is how I did it:

mountUsing(function() {
    $this-dispatch('focus-element', {selector: '#my-id'});
})

mountUsing(function() {
    $this-dispatch('focus-element', {selector: '#my-id'});
})

Then for the TextInput, add an ID using ->id('my-id'). And lastly, you need to load some JavaScript in the Livewire Page, and do something like:

<div x-data x-on:focus-element.window="document.querySelector($event.detail[0]).focus()"></div>

<div x-data x-on:focus-element.window="document.querySelector($event.detail[0]).focus()"></div>

A better solution would probably be to use plain JS to listen to the event than having to render an empty div just to use alpineJS, but you get the idea. THat's how we did it in our case. 🙂 EDIT: You'll most likely need to override createOptionAction so you can define your own Action. That way you can hook into the mountUsing function.

tjodalv•14mo ago

Thanks Lukas for detailed answer. It will be really helpful.

SkryptOP•14mo ago

You're welcome. Feel free to get back to me if something doesn't work 🙂

Gaming

Programming

Focus on Action Modal open?