TextField Focus Issue with Clear Icon

Franco98404 commented 1 month ago

Can we access your project?

[X] I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

The TextField does not move focus to the next widget when pressing the Tab key, if the clear icon is visible and the field contains text.

Expected Behavior

The TextField should move focus to the next widget when pressing the Tab key, if the clear icon is visible and the field contains text.

Steps to Reproduce

Create a group of TextFields (Group 1).
Duplicate the first group and enable the "Show Clear Field Icon" property (Group 2).
Duplicate Group 2 and additionally enable the "Update Page On Text Change" option, setting it to 250ms (Group 3).
Run a test or deploy the setup.

Observed Behavior:

Group 1 works correctly, shifting focus to the next widget when the Tab key is pressed. Group 2 shows the issue: If the text field contains text and the Tab key is pressed, focus doesn’t move to the next widget unless you wait long enough for the clear icon to appear. If you write and press Tab quickly, the issue isn't noticeable because the icon hasn't appear yet. If the text field is empty, it works as expected. Group 3 behaves like group 2, but with the "Refresh page when text changes" property added. This makes the problem more noticeable, as typing fast and pressing the Tab key quickly prevents the clear icon from appearing in time, thus masking the problem. By doing this the problem is more noticeable.

However, if you have an initial value to the textField the problem always occurs because the clear icon always appears.

Reproducible from Blank

[X] The steps to reproduce above start from a blank project.

Bug Report Code (Required)

IT4Cz/Hq4c9goddA7qrAcu9VliYsQlw1RY041sBtaxUbN5PNCJkQO8nTXFJWXf25dghffU2Kimc03MrVm9z2UsEBPS+ac6Vzz7h+bRfxTme6VJ+aDZOOVnJEGshYBXbFyImrgwklHMVqLng47Gebfu7LcBPANq7uOGo/FvmiA9nXvgfuQ0SLb3kNh1JWeC/v

Visual documentation

https://www.loom.com/share/527a63cd9e99437ea34bb60702bc75d7

Environment

- FlutterFlow version: FlutterFlow v5.0.8+ released October 25, 2024 - Flutter version is 3.24.2
- Platform: Web
- Browser name and version: Version 130.0.6723.58 (Official Build) (64-bit)
- Operating system and version affected: W11

Additional Information

No response

Alezanello commented 4 weeks ago

Hello!

This is expected behavior. In the generated code, the text field contains a child element (the icon). When you press the Tab key, it moves to the next child of the current widget or the next widget itself. If the "Show Clear Field Icon" option is enabled and there's text in the field, the focus will move to the icon. If the option is not enabled, it will move directly to the next text field.

I hope this clarifies things!

Franco98404 commented 3 weeks ago

Sure, I didn't look at the code, sorry :( I want to keep the icon because I consider it a good UX but I don't want the icon to be focused. What solution can be applied so that the icon is not focused when I press tab?

github-actions[bot] commented 2 weeks ago

This issue is stale because it has been open for 7 days with no activity. If there are no further updates, a team member will close the issue.

Alezanello commented 5 days ago

Hello, and apologies for the delayed response.

Unfortunately, this is the current expected behavior in FlutterFlow. If you’re looking to achieve something similar, you might consider implementing it with a custom widget, as there isn’t a native solution available in FlutterFlow at the moment.

Thank you for your understanding

FlutterFlow / flutterflow-issues