From 83912f3d51219ca4addd67fb43d33a993a6f1354 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <anv11827@esri.com>
Date: Thu, 10 Oct 2024 11:27:22 -0500
Subject: [PATCH] feat(input,input-text,text-area): support `spellcheck`
 property (#10489)

**Related Issue:** #9148

## Summary

Adds support for `spellcheck` property.

`spellcheck` property is a global attribute. Please refer the spec
[here](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck)
---
 .../calcite-components/src/components/input-text/input-text.tsx | 2 ++
 packages/calcite-components/src/components/input/input.tsx      | 2 ++
 .../calcite-components/src/components/text-area/text-area.tsx   | 2 ++
 3 files changed, 6 insertions(+)

diff --git a/packages/calcite-components/src/components/input-text/input-text.tsx b/packages/calcite-components/src/components/input-text/input-text.tsx
index ab93bb06151..68f326dc7bf 100644
--- a/packages/calcite-components/src/components/input-text/input-text.tsx
+++ b/packages/calcite-components/src/components/input-text/input-text.tsx
@@ -80,6 +80,7 @@ export class InputText
   @Watch("autofocus")
   @Watch("enterkeyhint")
   @Watch("inputmode")
+  @Watch("spellcheck")
   handleGlobalAttributesChanged(): void {
     forceUpdate(this);
   }
@@ -664,6 +665,7 @@ export class InputText
         readOnly={this.readOnly}
         ref={this.setChildElRef}
         required={this.required ? true : null}
+        spellcheck={this.el.spellcheck}
         tabIndex={this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null}
         type="text"
         value={this.value}
diff --git a/packages/calcite-components/src/components/input/input.tsx b/packages/calcite-components/src/components/input/input.tsx
index b5bb2e91cc3..4d84093c067 100644
--- a/packages/calcite-components/src/components/input/input.tsx
+++ b/packages/calcite-components/src/components/input/input.tsx
@@ -100,6 +100,7 @@ export class Input
   @Watch("autofocus")
   @Watch("enterkeyhint")
   @Watch("inputmode")
+  @Watch("spellcheck")
   handleGlobalAttributesChanged(): void {
     forceUpdate(this);
   }
@@ -1209,6 +1210,7 @@ export class Input
               readOnly={this.readOnly}
               ref={this.setChildElRef}
               required={this.required ? true : null}
+              spellcheck={this.el.spellcheck}
               step={this.step}
               tabIndex={
                 this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null
diff --git a/packages/calcite-components/src/components/text-area/text-area.tsx b/packages/calcite-components/src/components/text-area/text-area.tsx
index fe68f538946..0a4363f2376 100644
--- a/packages/calcite-components/src/components/text-area/text-area.tsx
+++ b/packages/calcite-components/src/components/text-area/text-area.tsx
@@ -87,6 +87,7 @@ export class TextArea
   //--------------------------------------------------------------------------
 
   @Watch("autofocus")
+  @Watch("spellcheck")
   handleGlobalAttributesChanged(): void {
     forceUpdate(this);
   }
@@ -329,6 +330,7 @@ export class TextArea
             ref={this.setTextAreaEl}
             required={this.required}
             rows={this.rows}
+            spellcheck={this.el.spellcheck}
             value={this.value}
             wrap={this.wrap}
           />