diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/JSONFormWidget/JSONForm_FieldProperties_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/JSONFormWidget/JSONForm_FieldProperties_spec.js index b676845dbc..dba35d7eb4 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/JSONFormWidget/JSONForm_FieldProperties_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/JSONFormWidget/JSONForm_FieldProperties_spec.js @@ -64,6 +64,11 @@ describe("Text Field Property Control", () => { cy.testJsontext("errormessage", "Custom error message"); cy.get(`${fieldPrefix}-name input`).click({ force: true }); cy.get(".bp3-popover-content").contains("Custom error message"); + + // Reset the error message + cy.testJsontext("errormessage", ""); + // Reset valid + cy.testJsontext("valid", ""); }); it("hides field when visible switched off", () => { @@ -82,6 +87,19 @@ describe("Text Field Property Control", () => { cy.togglebarDisable(`.t--property-control-disabled input`); }); + + it("throws error when REGEX does not match the input value", () => { + cy.testJsontext("regex", "^\\d+$"); + cy.get(`${fieldPrefix}-name input`) + .clear() + .type("abcd"); + cy.get(".bp3-popover-content").contains("Invalid input"); + + cy.get(`${fieldPrefix}-name input`) + .clear() + .type("1234"); + cy.get(".bp3-popover-content").should("not.exist"); + }); }); describe("Checkbox Field Property Control", () => { diff --git a/app/client/src/components/propertyControls/JSONFormComputeControl.tsx b/app/client/src/components/propertyControls/JSONFormComputeControl.tsx index dbbc2a370c..5736faab2a 100644 --- a/app/client/src/components/propertyControls/JSONFormComputeControl.tsx +++ b/app/client/src/components/propertyControls/JSONFormComputeControl.tsx @@ -181,6 +181,8 @@ class JSONFormComputeControl extends BaseControl { propertyValue: string, widgetName: string, ) => { + if (!isDynamicValue(propertyValue)) return propertyValue; + const { prefixTemplate, suffixTemplate } = getBindingTemplate(widgetName); const value = propertyValue.substring( @@ -193,6 +195,22 @@ class JSONFormComputeControl extends BaseControl { getComputedValue = (value: string) => { const { widgetName } = this.props.widgetProperties; + + /** + * If the input value is not a binding then there is no need of adding binding template + * to the value as it would be of no use. + * + * Original motivation of doing this to allow REGEX to work. If the value is REGEX, eg - ^\d+$ and the + * binding template is added, the REGEX is processed by evaluation and the "\" is considered as a escape and + * is removed from the final value and the regex become ^d+$. In order to make it work inside a binding the "\" + * has to be escaped by doing ^\\d+$. + * As the user is unaware of this binding template being added under the hood, it is not obvious for the user + * to escape the "\". + * Thus now we only add the binding template around a value only if the original value has a binding as that could + * be an indication of the usage of formData/sourceData/fieldState in the value. + */ + if (!isDynamicValue(value)) return value; + const stringToEvaluate = stringToJS(value); const { prefixTemplate, suffixTemplate } = getBindingTemplate(widgetName);