Reactive Inputs loose Focus within Action Modals

[geisi]

Package

filament/filament

Package Version

v3.2.25

Laravel Version

v10.44.0

Livewire Version

v3.4.5

PHP Version

PHP 8.3.3

Problem description

There is an issue with reactive fields within Filament Action Modals.

When a user attempts to type into a reactive field within the modal, any update to the modal's state—such as modifying input values or triggering state changes through interactions—causes the currently focused input field to lose its focus state. This forces the user to manually click back into the input field to continue their input, significantly disrupting the user experience and input flow.

https://github.com/filamentphp/filament/assets/10728579/aeefc072-46b8-43f4-9cc3-607345aff7f1

Expected behavior

Input fields within an action modal should retain their focus state through any state updates, allowing for uninterrupted data entry and interaction.

Steps to reproduce

Create an Action on List or Edit/Create Pages and add an Input with reactivity enabled.

Now click on that action to open the modal and type something. You will see that the input loses its focus state every time the state is updated via the wire.

Action::make('example_action')
    ->form([
        Textarea::make('content')
            ->reactive()
            ->required(),
    ])
    ->label('Open Action'),

Reproduction repository

https://github.com/geisi/filament-action-reactivity-issue

Relevant log output

No response

[zepfietje]

Has this issue only been introduced in a recent version of Filament/Livewire, @geisi?

[geisi]

@zepfietje I just did additional tests and discovered that this issue only happens when using the Chrome Grammarly Browser Extension... I have opened an issue at Grammarly, and I think this issue can be closed.

[zepfietje]

Alright, thanks for debugging, @geisi! Feel free to link that Grammarly issue here if possible.

[geisi]

We found another Chrome extension that has issues with Action Modal Input Focus. It seems that several Extensions with Integration into Form Inputs have that problem.

The Extension is called: Language Tool (https://languagetool.org/?force_language=1)

[zepfietje]

Why would this only be an issue in modals though? Have you checked with regular inputs and Livewire without Filament? 🙂

[geisi]

Yes, even Filament Inputs without Action Modals are working. This only happens within the Modal.

[zepfietje]

Alright. Let us know if you've been able to track down the cause of this. Not a priority for us if it's caused by browser plugins.