Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Paul Li 2022-03-16 22:45:12 +08:00 committed by GitHub
parent 36be2d213b
commit f9e30a1e15
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Inputv2_spec.js
View File

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

14
app/client/src/widgets/BaseInputWidget/widget/index.tsx
View File

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