[Bug]: Form input truncated on submit

[wichita-ser]

Is there an existing issue for this?

• [X] I have searched the existing issues

Description

When I type into the input text within the Form widget and press the submit button, I notice a delay where the data retrieved from the Form is delayed. This causes the text obtained from the input to be truncated.

Upon further investigation, I found that this delay issue only occurs with the last field in the form and also only occurs in the Form widget that is contained in the Modal widget.

Steps To Reproduce

1. Click on the "Open Form Modal" button to open a modal that contains a form widget.
2. In the form widget, fill in all the fields with the required values.
3. Immediately click the "Submit" button, then observe the text and check if all the text data is displayed correctly.

Public Sample App

https://app.appsmith.com/app/delay-input-text/page1-6685063cbd73d92d0af6fbe2

Environment

Production

Severity

High (Blocker to building or releasing)

Issue video log

https://www.loom.com/share/7e439bc1e5d448c2b93a76876fa8f01e?sid=9ea02c31-4383-4acd-b36e-4a804b72c013

Version

Cloud

[SunnyTitus]

Hi @wichita-ser , @Nikhil-Nandagopal

Please find the possible solution through my findings:

"The issue of form input truncation is addressed by ensuring that the state updates are fully completed before form submission, particularly for the last field in the form. This is achieved by using a short delay to handle rapid input changes and ensure state consistency. The backend is configured to handle and validate input data appropriately, ensuring that all data is processed accurately without truncation"

Also, we've a possible code for both FE & BE to address this, our team will be working on this issue and update accordingly.

[Harshithazemoso]

Hello @wichita-ser In the video, you have used two different types of modals, right? Can you mention the differences between those two modals?

[wichita-ser]

Hello @wichita-ser In the video, you have used two different types of modals, right? Can you mention the differences between those two modals?

Hi @Harshithazemoso, Both of these modals use the same modal type. However, the difference between these two modals is that in the first modal canvas, there is only an Input Widget, whereas in the other one, there is also an Input Widget, but it is within a Form Widget.

[Harshithazemoso]

Hello @wichita-ser ,Okay got it . Thanks for your response

[peyush99]

Hi @Nikhil-Nandagopal @pranavkanade , I'm picking this isssue

Solution approach: debounce the handleResetInput method in form widget, to ensure that the form submission logic waits for the latest state updates, preventing issues with truncated input values.