feat: Spellcheck property for the input widget (#8496)

* feat: Spellcheck property for the input widget

-- Add a new widget boolean property, isSpellCheck
-- Add the corresponding Cypress test cases

* feat: Spellcheck property for the input widget

-- Place isSpellCheck property just after autoFocus property

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

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",

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;

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

@@ -354,6 +354,21 @@ class InputWidget extends BaseWidget<InputWidgetProps, WidgetState> {
             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<InputWidgetProps, WidgetState> {
         phoneNumberCountryCode={phoneNumberCountryCode}
         placeholder={this.props.placeholderText}
         showError={!!this.props.isFocused}
+        spellCheck={!!this.props.isSpellCheck}
         stepSize={1}
         tooltip={this.props.tooltip}
         value={value}