diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Input_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Input_spec.js index c93a60654a..451a1bc945 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Input_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Input_spec.js @@ -79,6 +79,27 @@ describe("Input Widget Functionality", function() { .should("contain", this.data.placeholder); cy.get(publish.backToEditor).click({ force: true }); }); + + it("isSpellCheck: true", function() { + cy.openPropertyPane("inputwidget"); + cy.togglebar(commonlocators.spellCheck + " " + "input"); + cy.PublishtheApp(); + cy.get(publish.inputWidget + " " + "input") + .invoke("attr", "spellcheck") + .should("eq", "true"); + cy.get(publish.backToEditor).click({ force: true }); + }); + + it("isSpellCheck: false", function() { + cy.openPropertyPane("inputwidget"); + cy.togglebarDisable(commonlocators.spellCheck + " " + "input"); + cy.PublishtheApp(); + cy.get(publish.inputWidget + " " + "input") + .invoke("attr", "spellcheck") + .should("eq", "false"); + cy.get(publish.backToEditor).click({ force: true }); + }); + it("Input Widget Functionality To Check Disabled Widget", function() { cy.openPropertyPane("inputwidget"); cy.togglebar(commonlocators.Disablejs + " " + "input"); diff --git a/app/client/cypress/locators/commonlocators.json b/app/client/cypress/locators/commonlocators.json index 2e2a083d60..e600db2719 100644 --- a/app/client/cypress/locators/commonlocators.json +++ b/app/client/cypress/locators/commonlocators.json @@ -39,6 +39,7 @@ "onDateSelectedField": ".t--property-control-ondateselected", "TableRow": ".t--draggable-tablewidget .tbody", "Disablejs": ".t--property-control-disabled", + "spellCheck": ".t--property-control-spellcheck", "requiredjs": ".t--property-control-required", "allowScroll": ".t--property-control-allowscroll input", "tableInner": ".t--draggable-tablewidget span.t--widget-name", diff --git a/app/client/src/widgets/InputWidget/component/index.tsx b/app/client/src/widgets/InputWidget/component/index.tsx index e9c75b251b..ccc5300df4 100644 --- a/app/client/src/widgets/InputWidget/component/index.tsx +++ b/app/client/src/widgets/InputWidget/component/index.tsx @@ -521,6 +521,7 @@ class InputComponent extends React.Component< undefined ) } + spellCheck={this.props.spellCheck} type={this.getType(this.props.inputType)} value={this.props.value} /> @@ -621,6 +622,7 @@ export interface InputComponentProps extends ComponentProps { currencyCountryCode?: string; noOfDecimals?: number; phoneNumberCountryCode?: string; + spellCheck: boolean; allowCurrencyChange?: boolean; decimalsInCurrency?: number; label: string; diff --git a/app/client/src/widgets/InputWidget/widget/index.tsx b/app/client/src/widgets/InputWidget/widget/index.tsx index e89e27c0cd..037b9be413 100644 --- a/app/client/src/widgets/InputWidget/widget/index.tsx +++ b/app/client/src/widgets/InputWidget/widget/index.tsx @@ -354,6 +354,21 @@ class InputWidget extends BaseWidget { isTriggerProperty: false, validation: { type: ValidationTypes.BOOLEAN }, }, + { + propertyName: "isSpellCheck", + label: "Spellcheck", + helpText: + "Defines whether the text input may be checked for spelling errors", + controlType: "SWITCH", + isJSConvertible: false, + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.BOOLEAN }, + hidden: (props: InputWidgetProps) => { + return props.inputType !== InputTypes.TEXT; + }, + dependencies: ["inputType"], + }, ], }, { @@ -744,6 +759,7 @@ class InputWidget extends BaseWidget { phoneNumberCountryCode={phoneNumberCountryCode} placeholder={this.props.placeholderText} showError={!!this.props.isFocused} + spellCheck={!!this.props.isSpellCheck} stepSize={1} tooltip={this.props.tooltip} value={value}