fix: Input widget onSubmit gets triggered before evaluation (#11590)

* fix: onSubmit gets triggered before evaluation

-- Enforce to update text meta property before trigger the submit action

* fix: onSubmit gets triggered before evaluation

-- Add a comment and a Cypress test on the fix

* fix: onSubmit gets triggered before evaluation

-- Fix on the failed test case

* fix: onSubmit gets triggered before evaluation

-- Rewrite comments
-- Rewrite the test case to fail if we revert changes

* fix: Iput widget onSubmit gets triggered before evaluation

-- Update a common property, isDirty

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);

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: {