Closed geisi closed 5 months ago
Has this issue only been introduced in a recent version of Filament/Livewire, @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.
Alright, thanks for debugging, @geisi! Feel free to link that Grammarly issue here if possible.
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)
Why would this only be an issue in modals though? Have you checked with regular inputs and Livewire without Filament? 🙂
Yes, even Filament Inputs without Action Modals are working. This only happens within the Modal.
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.
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.
Reproduction repository
https://github.com/geisi/filament-action-reactivity-issue
Relevant log output
No response