From dce001ecaf3e960f230b52148ba24ff6b5de4193 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Fri, 2 Oct 2020 15:46:58 -0400
Subject: [PATCH] Add spellcheck prop; fixes #233
---
docs/getting-started/changelog.md | 1 +
src/components.d.ts | 8 ++++++++
src/components/input/input.tsx | 4 ++++
3 files changed, 13 insertions(+)
diff --git a/docs/getting-started/changelog.md b/docs/getting-started/changelog.md
index 630264e4..0315d70d 100644
--- a/docs/getting-started/changelog.md
+++ b/docs/getting-started/changelog.md
@@ -9,6 +9,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
## Next
- Added support for dropdowns and non-icon elements to `sl-input`
+- Added `spellcheck` prop to `sl-input`
- Fixed a bug where `sl-progress-ring` rendered incorrectly when zoomed in Safari [#227](https://github.com/shoelace-style/shoelace/issues/227)
- Fixed a bug where tabbing into slotted elements closes `sl-dropdown` when used in a shadow root [#223](https://github.com/shoelace-style/shoelace/issues/223)
- Fixed a bug where scroll anchoring caused undesirable scrolling when `sl-details` are grouped
diff --git a/src/components.d.ts b/src/components.d.ts
index 123426b3..36e116ca 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -614,6 +614,10 @@ export namespace Components {
* The input's size.
*/
"size": 'small' | 'medium' | 'large';
+ /**
+ * Enables spell checking on the input.
+ */
+ "spellcheck": boolean;
/**
* The input's step attribute.
*/
@@ -2065,6 +2069,10 @@ declare namespace LocalJSX {
* The input's size.
*/
"size"?: 'small' | 'medium' | 'large';
+ /**
+ * Enables spell checking on the input.
+ */
+ "spellcheck"?: boolean;
/**
* The input's step attribute.
*/
diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx
index a05f922c..e7888f63 100644
--- a/src/components/input/input.tsx
+++ b/src/components/input/input.tsx
@@ -100,6 +100,9 @@ export class Input {
/** The input's autofocus attribute. */
@Prop() autofocus: boolean;
+ /** Enables spell checking on the input. */
+ @Prop() spellcheck: boolean;
+
/**
* This will be true when the control is in an invalid state. Validity is determined by props such as `type`,
* `required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API.
@@ -307,6 +310,7 @@ export class Input {
autoComplete={this.autocomplete}
autoCorrect={this.autocorrect}
autoFocus={this.autofocus}
+ spellcheck={this.spellcheck}
pattern={this.pattern}
required={this.required}
inputMode={this.inputmode}