Hello all,
I’m encountering an issue with my app that I’d like to share. The app is essentially a form to be filled out by users. When the user clicks the Save button, their answers are saved in the backend.
How It Works:
(see Screenshots for visualization)
Step 1. Each input field has a default value linked to a transformer called formAnswers. This transformer takes its value from the variable answer.
Step 2. When a user modifies an input field, it triggers the query updateAnswer, which updates the variable answer. As a result:
• The value of formAnswers changes.
• The default value of the input field is updated.
Step 3. When the user clicks the Save button, it triggers the saveAnswers query, saving the content of the answer variable to the backend.
The Issue:
The issue arises specifically with Text Input fields.
In step 2, I use an Event Handler on the input field to trigger updateAnswer whenever a modification is made. Normally, this event handler is set to trigger On Change, meaning it fires in real-time as the user types.
However, for Text Input fields, this causes a problem:
• Since the event is triggered very frequently (every keystroke), the default value gets updated while the user is still typing.
• This results in a confusing experience for the user, as the text may appear to “run backward” due to the mismatch between the input and the default value.
To address this, I’ve set the Event Handler to trigger On Blur (when the user leaves the field) instead of On Change.
The Question:
If the user types something in the Text Input field and then immediately clicks Save, two events will be triggered almost simultaneously:
-
The On Blur event (triggering the updateAnswer query).
-
The Save button event (triggering the saveAnswers query).
How can I ensure that when saveAnswers is triggered, the variable answer is fully up-to-date, so the user’s input isn’t lost?
Thank you for your help!
