diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Inputv2_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Inputv2_spec.js index 2b38e4f9ee..efd5d06455 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Inputv2_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Inputv2_spec.js @@ -107,6 +107,35 @@ describe("Input widget V2 - ", () => { }); }); + it("8. onSubmit should be triggered with the whole input value", () => { + cy.openPropertyPane(widgetName); + cy.selectDropdownValue(".t--property-control-datatype", "Text"); + cy.get(".t--property-control-required label") + .last() + .click({ force: true }); + // Set onSubmit action, storing value + cy.get(".t--property-control-onsubmit") + .find(".t--js-toggle") + .click(); + cy.updateCodeInput( + ".t--property-control-onsubmit", + "{{storeValue('textPayloadOnSubmit',Input1.text)}}", + ); + // Bind to stored value above + cy.openPropertyPane("textwidget"); + cy.updateCodeInput( + ".t--property-control-text", + "{{appsmith.store.textPayloadOnSubmit}}", + ); + cy.closePropertyPane(); + cy.get(widgetInput).clear(); + cy.wait(300); + // Input text and hit enter key + cy.get(widgetInput).type("test{enter}"); + // Assert if the Text widget contains the whole value, test + cy.get(".t--widget-textwidget").should("have.text", "test"); + }); + function enterAndTest(text, expected) { cy.get(`.t--widget-${widgetName} input`).clear(); cy.wait(300); diff --git a/app/client/src/widgets/BaseInputWidget/widget/index.tsx b/app/client/src/widgets/BaseInputWidget/widget/index.tsx index 42f3ea5f65..338201fdad 100644 --- a/app/client/src/widgets/BaseInputWidget/widget/index.tsx +++ b/app/client/src/widgets/BaseInputWidget/widget/index.tsx @@ -334,7 +334,19 @@ class BaseInputWidget< const { isValid, onSubmit } = this.props; const isEnterKey = e.key === "Enter" || e.keyCode === 13; if (isEnterKey && typeof onSubmit === "string" && onSubmit && isValid) { - super.executeAction({ + /** + * Originally super.executeAction was used to trigger the ON_SUBMIT action and + * updateMetaProperty to update the text. + * Since executeAction is not queued and updateMetaProperty is, + * the user would observe that the data tree only gets partially updated with text + * before the ON_SUBMIT would get triggered, + * if they type {enter} really fast after typing some input text. + * So we're using updateMetaProperty to trigger the ON_SUBMIT to let the data tree update + * before we actually execute the action. + * Since updateMetaProperty expects a meta property to be updated, + * we are redundantly updating the common meta property, isDirty which is common on its child widgets here. But the main part is the action execution payload. + */ + this.props.updateWidgetMetaProperty("isDirty", this.props.isDirty, { triggerPropertyName: "onSubmit", dynamicString: onSubmit, event: {