StickyHeader produce multiple UI errors

Franco98404 commented 7 months ago

Has your issue been reported?

[X] I have searched the existing issues and confirm it has not been reported.
[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

This issue is a little bit complicated because produces 3 errors:

Expected Behavior

When a Text Field is touched on the mobile web a space shouldn't appear above the keyboard
The header should be always aligned correctly after closing the keyboard.
The application should be able to recognize the screen touches

Steps to Reproduce

Create a page
Add a StickyHeader
In the StickyHeader Content add a column with a lot of TextField

Reproducible from Blank

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

Bug Report Code (Required)

IT4ojfHq5ZZOxMtJ7r6JcMdVryQXNlgjbIIZkspBdywdCLb0P+0qRvfBQElWUs+0dwlceE6Z+HI1+cnemvzPVMYEC0+cGL5RyqlQWA/NWn2QVaqKBbm0W25/DcBmBUeMyJ6s2hR+NsZsSEIh2GGUA+usa3faNIDjImwFMPG1A5CK2SrDX1iXc2URm05KZDPz

Context

I want to enter some text in the textFields using a stickyHeader

Visual documentation

Something useful:

The header has a sudden movement when the keyboard is closed.
Looks like that only happens when the textField is not empty

I have 3 videos recorded reproducing the bug: 25 January 2024 https://www.loom.com/share/b22e01e0b053445f89624f544a4d8a48 https://www.loom.com/share/80f1c67464854fae8b5861e161f7e926?sid=64f9c4f0-7c62-4153-8cdc-2f6cd289124e

3 December 2023 https://www.loom.com/share/15ac0cf69dcb4983864e677536a8188c?sid=3bf3ebc2-4a94-431c-9432-963b787c30d6

Additional Info

Issues related:

Environment

- FlutterFlow version: FlutterFlow v4.1 released January 25, 2024
- Platform: Web
- Browser name and version: Chrome Version 120.0.6099.225 (Official Build) (64-bit)
- Operating system and version affected: Android

github-actions[bot] commented 6 months 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.

github-actions[bot] commented 6 months 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.

hariprasadms commented 6 months ago

Hi @Franco98404 - Thank you for submitting the issue. After reviewing the details and video clips you provided, I'd like to address the use of multiple text fields in the sticky header widget. This design approach may not be user-friendly as scrolling can often interfere with text field focus, leading to interrupted user experience. Implementing additional properties to enhance the widgets in the widget tree could potentially improve the user experience which is not possible. You can do it using custom widgets. At this stage, so this is not bug. I hope this feedback helps you consider making some design changes. Thank you.

Franco98404 commented 6 months ago

Hi @Franco98404 - Thank you for submitting the issue. After reviewing the details and video clips you provided, I'd like to address the use of multiple text fields in the sticky header widget. This design approach may not be user-friendly as scrolling can often interfere with text field focus, leading to interrupted user experience. Implementing additional properties to enhance the widgets in the widget tree could potentially improve the user experience which is not possible. You can do it using custom widgets. At this stage, so this is not bug. I hope this feedback helps you consider making some design changes. Thank you.

I know it's not user-friendly, it's just an example, the idea is to show the error, because if only one text field appears, the mentioned errors still appear.

github-actions[bot] commented 5 months 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.

github-actions[bot] commented 4 months 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.

ryanc4ai commented 3 months ago

I believe I have another example of this issue, in particular the last example of extra space added when the keyboard is activated of a text input in the lower 30% of the screen.

This only happens on Web on Mobile (native apps don't insert the extra space).

I made a test project to show this. Focus into each of the text inputs, the lower 2 show the issue: https://test-scrollable-j8rcgt.flutterflow.app/ https://app.flutterflow.io/project/test-scrollable-j8rcgt?tab=uiBuilder&page=HomePage

Relevant old bugs: https://github.com/FlutterFlow/flutterflow-issues/issues/921

FlutterFlow / flutterflow-issues