diff --git a/cspell.json b/cspell.json index 1e52dd4a..1d9c95a1 100644 --- a/cspell.json +++ b/cspell.json @@ -31,6 +31,7 @@ "Docsify", "dropdowns", "easings", + "enterkeyhint", "eqeqeq", "erroneou", "esbuild", diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index ade1c951..385af2eb 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -10,6 +10,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis - Added `button` part to `` - Added custom validity examples and tests to ``, ``, and `` +- Added `enterkeyhint` attribute to `` and `` - Fixed a bug that prevented `setCustomValidity()` from working with `` - Fixed a bug where the right border of a checked `` was the wrong color - Fixed a bug that prevented a number of properties, methods, etc. from being documented in `` and `` diff --git a/src/components/input/input.ts b/src/components/input/input.ts index 9b8041f9..c60853a8 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -132,6 +132,12 @@ export default class SlInput extends LitElement { /** The input's autofocus attribute. */ @property({ type: Boolean }) autofocus: boolean; + /** + * The input's enterkeyhint attribute. This can be used to customize the label or icon of the Enter key on virtual + * keyboards. + */ + @property() enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'; + /** Enables spell checking on the input. */ @property({ type: Boolean }) spellcheck: boolean; @@ -350,6 +356,7 @@ export default class SlInput extends LitElement { ?autofocus=${this.autofocus} spellcheck=${ifDefined(this.spellcheck)} pattern=${ifDefined(this.pattern)} + enterkeyhint=${ifDefined(this.enterkeyhint)} inputmode=${ifDefined(this.inputmode)} aria-describedby="help-text" aria-invalid=${this.invalid ? 'true' : 'false'} diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts index c3967835..7ece64b9 100644 --- a/src/components/textarea/textarea.ts +++ b/src/components/textarea/textarea.ts @@ -101,6 +101,12 @@ export default class SlTextarea extends LitElement { /** The textarea's autofocus attribute. */ @property({ type: Boolean }) autofocus: boolean; + /** + * The input's enterkeyhint attribute. This can be used to customize the label or icon of the Enter key on virtual + * keyboards. + */ + @property() enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'; + /** Enables spell checking on the textarea. */ @property({ type: Boolean }) spellcheck: boolean; @@ -309,6 +315,7 @@ export default class SlTextarea extends LitElement { autocorrect=${ifDefined(this.autocorrect)} ?autofocus=${this.autofocus} spellcheck=${ifDefined(this.spellcheck)} + enterkeyhint=${ifDefined(this.enterkeyhint)} inputmode=${ifDefined(this.inputmode)} aria-describedby="help-text" @change=${this.handleChange}