diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index 396e542d25..94af362c57 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core'; +import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core'; import { Color, Mode, StyleEvent, TextFieldTypes, TextInputChangeEvent } from '../../interface'; import { debounceEvent, deferEvent, renderHiddenInput } from '../../utils/helpers'; @@ -246,6 +246,13 @@ export class Input implements InputComponent { this.ionInputDidUnload.emit(); } + @Method() + focus() { + if (this.nativeInput) { + this.nativeInput.focus(); + } + } + private emitStyle() { this.ionStyle.emit({ 'interactive': true, diff --git a/core/src/components/input/readme.md b/core/src/components/input/readme.md index c258cb264d..e2146018b0 100644 --- a/core/src/components/input/readme.md +++ b/core/src/components/input/readme.md @@ -55,6 +55,13 @@ It is meant for text `type` inputs only, such as `"text"`, `"password"`, `"email | `ionStyle` | Emitted when the styles change. | +## Methods + +| Method | Description | +| ------- | ----------- | +| `focus` | | + + ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/searchbar/readme.md b/core/src/components/searchbar/readme.md index 00dcabcb08..2cab2d8be5 100644 --- a/core/src/components/searchbar/readme.md +++ b/core/src/components/searchbar/readme.md @@ -42,6 +42,13 @@ A Searchbar should be used instead of an input to search lists. A clear button i | `ionInput` | Emitted when a keyboard input ocurred. | +## Methods + +| Method | Description | +| ------- | ----------- | +| `focus` | | + + ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx index 267428a9e1..c292e9ff20 100644 --- a/core/src/components/searchbar/searchbar.tsx +++ b/core/src/components/searchbar/searchbar.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core'; +import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core'; import { Color, Mode, TextInputChangeEvent } from '../../interface'; import { debounceEvent } from '../../utils/helpers'; @@ -152,6 +152,13 @@ export class Searchbar { this.debounceChanged(); } + @Method() + focus() { + if (this.nativeInput) { + this.nativeInput.focus(); + } + } + /** * Clears the input field and triggers the control change. */ diff --git a/core/src/components/textarea/readme.md b/core/src/components/textarea/readme.md index 955570e647..862b170929 100644 --- a/core/src/components/textarea/readme.md +++ b/core/src/components/textarea/readme.md @@ -46,6 +46,13 @@ The textarea component accepts the [native textarea attributes](https://develope | `ionStyle` | Emitted when the styles change. | +## Methods + +| Method | Description | +| ------- | ----------- | +| `focus` | | + + ## CSS Custom Properties | Name | Description | diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx index ad05ed92b4..57ef2cba38 100644 --- a/core/src/components/textarea/textarea.tsx +++ b/core/src/components/textarea/textarea.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core'; +import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core'; import { Color, Mode, StyleEvent, TextInputChangeEvent } from '../../interface'; import { debounceEvent, deferEvent, renderHiddenInput } from '../../utils/helpers'; @@ -15,7 +15,7 @@ import { TextareaComponent } from '../input/input-base'; }) export class Textarea implements TextareaComponent { - private inputEl?: HTMLTextAreaElement; + private nativeInput?: HTMLTextAreaElement; private inputId = `ion-input-${textareaIds++}`; didBlurAfterEdit = false; @@ -157,9 +157,9 @@ export class Textarea implements TextareaComponent { */ @Watch('value') protected valueChanged() { - const { inputEl, value } = this; - if (inputEl!.value !== value) { - inputEl!.value = value; + const { nativeInput, value } = this; + if (nativeInput!.value !== value) { + nativeInput!.value = value; } this.ionChange.emit({ value }); } @@ -170,6 +170,13 @@ export class Textarea implements TextareaComponent { this.emitStyle(); } + @Method() + focus() { + if (this.nativeInput) { + this.nativeInput.focus(); + } + } + private emitStyle() { this.ionStyle.emit({ 'interactive': true, @@ -182,7 +189,7 @@ export class Textarea implements TextareaComponent { } private onInput(ev: KeyboardEvent) { - this.value = this.inputEl!.value; + this.value = this.nativeInput!.value; this.emitStyle(); this.ionInput.emit(ev); } @@ -249,7 +256,7 @@ export class Textarea implements TextareaComponent { return (