diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/currency_widget_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/CurrencyInput_spec.js similarity index 84% rename from app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/currency_widget_spec.js rename to app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/CurrencyInput_spec.js index adfcba3f82..4d6423c491 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/currency_widget_spec.js +++ b/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", ""); + }); }); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Phone_input_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Phone_input_spec.js index dd3c781c7b..da46a7dc14 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Phone_input_spec.js +++ b/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", ""); + }); }); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/input_v2_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/input_v2_spec.js index bacb94eddb..fb25f94ce6 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/input_v2_spec.js +++ b/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", ""); + }); }); diff --git a/app/client/src/widgets/BaseInputWidget/widget/index.tsx b/app/client/src/widgets/BaseInputWidget/widget/index.tsx index d8a76d598c..b1e696e75f 100644 --- a/app/client/src/widgets/BaseInputWidget/widget/index.tsx +++ b/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, diff --git a/app/client/src/widgets/CurrencyInputWidget/widget/index.tsx b/app/client/src/widgets/CurrencyInputWidget/widget/index.tsx index 5441dc33b4..b492013c28 100644 --- a/app/client/src/widgets/CurrencyInputWidget/widget/index.tsx +++ b/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 | React.KeyboardEvent, ) => { - 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) => {