Popup Calendar Component Not Displaying Correct Data in Textfield from the User Note

[ozakharchenko02100]

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 doesn't show the correct data from the single query, but the text appears correctly in the component popupCalendar.

Expected Behavior

The TextField should display the correct data from the query, just like it appears in the text in the popupCalendar component.

Steps to Reproduce

Steps to Reproduce:

1. Open the popupCalendar component on the page. (https://app.flutterflow.io/project/dayly-qwzi1j?tab=pageSelector&component=popupCalendar)
2. Check element TextNote
3. Check TextField TextFieldNote
4. Run test mode
5. Check the behavior of the text and TextField
6. Text = correct data
7. TextField = incorrect Dara

Reproducible from Blank

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

Bug Report Code (Required)

ITEelPLq5YxJpbxI0M7Iae5VowMwHVgjbJ0vpe5+dwsjCeOqEZoXds/Bdk5WcuqHYXNPek79kkYEwdL2joTxL/UqPTWtGZhl/pNpUxDiYzuQVq6OCqmSVkQlQP9PCBGf4aaFuglDJvZiSVJh3TqmFvO+a3qCf9qOYwx5e6fDbOY=

Visual documentation

https://www.loom.com/share/15d187f3bd5140238130f84f60055cd1 https://www.loom.com/share/999b27c3717d4b2581ce60cf3621e562

Environment

- FlutterFlow version: Last
- Platform: Web
- Browser name and version: Google Chrome
- Operating system and version affected: Windows 11

Additional Information

We have already tried to set the value in the app and component states. Convert to the component element, but still, it doesn't work

[Alezanello]

Hello!

A TextField rebuilds differently compared to a Text Widget, which can lead to some delays like the one shown in your video. Instead of setting the "Initial Value" through a query, I highly recommend using an action to handle this more effectively.

For example, when selecting a specific date, use the "Set Form Field" action to directly update the value of the TextField. This approach avoids relying on a rebuild to update the initial value, which may cause delays—such as the behavior you’re experiencing, where clicking on "20" does nothing, but clicking "19" shows "20" (lagging behind by one rebuild).

This method should ensure smoother updates without the delay. Let me know if you need more details or assistance with implementing this!

[ozakharchenko02100]

I followed your advice and removed the 'Initial Value' using a query. I also set up a 'Set Form Field' action to directly update the value, but it still doesn't work. Please check the video https://www.loom.com/share/3ce8275f07b64a828a1078074c31bac1 @Alezanello

[Alezanello]

Interesting observation!

I checked your project, and one approach you could take is to set the User_notes collection query to Single-Time Query and use a Refresh Database Request action whenever updates are needed.

For example:

• Initially, retrieve all the user’s notes in one query—great for working with the data.
• If the user makes changes, update the database and trigger a refresh. This approach avoids maintaining a continuous streaming query, improving performance.

In the Action Flow for selecting a date, instead of using the Wait Action for 700ms, you can replace it with a Refresh Database Request action and enable the Wait for result option. This ensures the system waits until all data is refreshed. Then, set the form field with the updated query results, ensuring you’re always working with the latest information from the database.

[ozakharchenko02100]

@Alezanello I used your solutions, but it seems like FlutterFlow is still displaying data from the previous data reference.

https://www.loom.com/share/13cb8ba594e04a69b26687233db9fc44

[Alezanello]

Something doesn’t seem quite right. The "Set Form Field" is definitely pulling data from the most recent database query, but the issue seems to be related to when the text field is being rebuilt.

Let’s try this: after the "Set Form Field" action, add an "Update AppState" action. Don’t update anything in the AppState, but be sure to select the "Rebuild Containing Page" option.

Let me know if this resolves the issue!

[ozakharchenko02100]

@Alezanello unfortunately, it didn't resolve my issue :(

[ozakharchenko02100]

@Alezanello Do you have any other idea how this issue can be resolved?

[Alezanello]

One last chance, put another AppState BEFORE the Set Form Field, and put "Rebuild All Pages" in both.

[ozakharchenko02100]

@Alezanello unfortunately it didn't change the TextField value to the correct one. Please check out the video: https://www.loom.com/share/5dd3a31de66d4f4089f843c5c105bbf9

[Alezanello]

Sorry to this being repetitive, could you do the same video but when you are showing me the behavior, scroll down the Debug Panel where it shows the variables to the values of the query returned to set on the Field?

[ozakharchenko02100]

Yes, of course

https://www.loom.com/share/b86fe9b6840d42068bf6d68258066560

[ozakharchenko02100]

Hello @Alezanello. Thank you for your help so far. I appreciate your efforts. I was wondering if there might be another solution or approach we could try to resolve this issue?

[Alezanello]

At this point, I’m out of options as to why this issue might be occurring. I recommend reaching out to our support team via in-app chat or at support@flutterflow.io for further assistance.

Thank you for the patience