fix: Phone Input and Input widget not getting reset on submit (#10860)

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/CurrencyInput_spec.js

@@ -2,6 +2,7 @@ const dsl = require("../../../../fixtures/emptyDSL.json");
 const explorer = require("../../../../locators/explorerlocators.json");
 
 const widgetName = "currencyinputwidget";
+const widgetInput = `.t--widget-${widgetName} input`;
 
 describe("Currency widget - ", () => {
   before(() => {
@@ -22,10 +23,10 @@ describe("Currency widget - ", () => {
 
   it("should check for type of value and widget", () => {
     function enterAndTest(text, expected) {
-      cy.get(`.t--widget-${widgetName} input`).clear();
+      cy.get(widgetInput).clear();
       cy.wait(300);
       if (text) {
-        cy.get(`.t--widget-${widgetName} input`).type(text);
+        cy.get(widgetInput).type(text);
       }
       cy.openPropertyPane("textwidget");
       cy.get(".t--widget-textwidget").should("contain", expected);
@@ -87,4 +88,19 @@ describe("Currency widget - ", () => {
     enterAndTest("100.22", "100.22:100.22:true:string:number:GB:GBP");
     cy.get(".t--input-currency-change").should("contain", "£");
   });
+
+  it("should check that widget input resets on submit", () => {
+    cy.openPropertyPane(widgetName);
+    cy.get(
+      ".t--property-control-onsubmit .t--open-dropdown-Select-Action",
+    ).click();
+    cy.selectShowMsg();
+    cy.addSuccessMessage("Submitted!!");
+
+    cy.get(widgetInput).clear();
+    cy.wait(300);
+    cy.get(widgetInput).type("10000{enter}");
+    cy.wait(300);
+    cy.get(widgetInput).should("contain.value", "");
+  });
 });

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Phone_input_spec.js

@@ -2,6 +2,7 @@ const dsl = require("../../../../fixtures/emptyDSL.json");
 const explorer = require("../../../../locators/explorerlocators.json");
 
 const widgetName = "phoneinputwidget";
+const widgetInput = `.t--widget-${widgetName} input`;
 
 describe("Phone input widget - ", () => {
   before(() => {
@@ -54,4 +55,19 @@ describe("Phone input widget - ", () => {
     cy.get(".t--widget-textwidget").should("contain", "99999 99999:IN:+91");
     cy.get(".t--input-country-code-change").should("contain", "🇮🇳+91");
   });
+
+  it("should check that widget input resets on submit", () => {
+    cy.openPropertyPane(widgetName);
+    cy.get(
+      ".t--property-control-onsubmit .t--open-dropdown-Select-Action",
+    ).click();
+    cy.selectShowMsg();
+    cy.addSuccessMessage("Submitted!!");
+
+    cy.get(widgetInput).clear();
+    cy.wait(300);
+    cy.get(widgetInput).type("1234567890{enter}");
+    cy.wait(300);
+    cy.get(widgetInput).should("contain.value", "");
+  });
 });

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/input_v2_spec.js

@@ -2,6 +2,7 @@ const dsl = require("../../../../fixtures/emptyDSL.json");
 const explorer = require("../../../../locators/explorerlocators.json");
 
 const widgetName = "inputwidgetv2";
+const widgetInput = `.t--widget-${widgetName} input`;
 
 describe("Input widget V2 - ", () => {
   before(() => {
@@ -134,4 +135,19 @@ describe("Input widget V2 - ", () => {
       ].forEach(enterAndTest);
     });
   });
+
+  it("should check that widget input resets on submit", () => {
+    cy.openPropertyPane(widgetName);
+    cy.get(
+      ".t--property-control-onsubmit .t--open-dropdown-Select-Action",
+    ).click();
+    cy.selectShowMsg();
+    cy.addSuccessMessage("Submitted!!");
+
+    cy.get(widgetInput).clear();
+    cy.wait(300);
+    cy.get(widgetInput).type("test{enter}");
+    cy.wait(300);
+    cy.get(widgetInput).should("contain.value", "");
+  });
 });

app/client/src/widgets/BaseInputWidget/widget/index.tsx

@@ -304,8 +304,10 @@ class BaseInputWidget<
     this.props.updateWidgetMetaProperty("isFocused", focusState);
   }
 
-  onSubmitSuccess(result: ExecutionResult) {
+  onSubmitSuccess = (result: ExecutionResult) => {
     if (result.success && this.props.resetOnSubmit) {
+      //Resets isDirty
+      super.resetChildrenMetaProperty(this.props.widgetId);
       this.props.updateWidgetMetaProperty("text", "", {
         triggerPropertyName: "onSubmit",
         dynamicString: this.props.onTextChanged,
@@ -313,8 +315,17 @@ class BaseInputWidget<
           type: EventType.ON_TEXT_CHANGE,
         },
       });
+
+      /*
+       *  Value is a derived property in CURRENCY_INPUT_WIDGET &
+       *  INPUT_WIDGET_V2, so only reset value in
+       *  PHONE_INPUT_WIDGET, where its not derived value.
+       */
+      if (this.props.type === "PHONE_INPUT_WIDGET") {
+        this.props.updateWidgetMetaProperty("value", undefined);
+      }
     }
-  }
+  };
 
   handleKeyDown(
     e:
@@ -323,7 +334,7 @@ class BaseInputWidget<
   ) {
     const { isValid, onSubmit } = this.props;
     const isEnterKey = e.key === "Enter" || e.keyCode === 13;
-    if (isEnterKey && typeof onSubmit == "string" && isValid) {
+    if (isEnterKey && typeof onSubmit === "string" && onSubmit && isValid) {
       super.executeAction({
         triggerPropertyName: "onSubmit",
         dynamicString: onSubmit,

app/client/src/widgets/CurrencyInputWidget/widget/index.tsx

@@ -4,10 +4,7 @@ import { RenderModes, WidgetType } from "constants/WidgetConstants";
 import CurrencyInputComponent, {
   CurrencyInputComponentProps,
 } from "../component";
-import {
-  EventType,
-  ExecutionResult,
-} from "constants/AppsmithActionConstants/ActionConstants";
+import { EventType } from "constants/AppsmithActionConstants/ActionConstants";
 import {
   ValidationTypes,
   ValidationResponse,
@@ -290,35 +287,12 @@ class CurrencyInputWidget extends BaseInputWidget<
     }
   };
 
-  onSubmitSuccess = (result: ExecutionResult) => {
-    if (result.success && this.props.resetOnSubmit) {
-      this.props.updateWidgetMetaProperty("text", "", {
-        triggerPropertyName: "onSubmit",
-        dynamicString: this.props.onTextChanged,
-        event: {
-          type: EventType.ON_TEXT_CHANGE,
-        },
-      });
-    }
-  };
-
   handleKeyDown = (
     e:
       | React.KeyboardEvent<HTMLTextAreaElement>
       | React.KeyboardEvent<HTMLInputElement>,
   ) => {
-    const { isValid, onSubmit } = this.props;
-    const isEnterKey = e.key === "Enter" || e.keyCode === 13;
-    if (isEnterKey && onSubmit && isValid) {
-      super.executeAction({
-        triggerPropertyName: "onSubmit",
-        dynamicString: onSubmit,
-        event: {
-          type: EventType.ON_SUBMIT,
-          callback: this.onSubmitSuccess,
-        },
-      });
-    }
+    super.handleKeyDown(e);
   };
 
   onStep = (direction: number) => {