feat(inputs): add focus() method

fixes #15266
fixes #15268

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,

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/)*

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/)*

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.
    */

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                     |

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 (
       <textarea
         class="native-textarea"
-        ref={el => this.inputEl = el as HTMLTextAreaElement}
+        ref={el => this.nativeInput = el as HTMLTextAreaElement}
         autoCapitalize={this.autocapitalize}
         autoFocus={this.autofocus}
         disabled={this.disabled}

core/src/generated.d.ts

@@ -1705,6 +1705,7 @@ export namespace StencilComponents {
     * If true, the user cannot interact with the input. Defaults to `false`.
     */
     'disabled': boolean;
+    'focus': () => void;
     /**
     * A hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is `"text"`, `"password"`, `"email"`, or `"url"`. Possible values are: `"verbatim"`, `"latin"`, `"latin-name"`, `"latin-prose"`, `"full-width-latin"`, `"kana"`, `"katakana"`, `"numeric"`, `"tel"`, `"email"`, `"url"`.
     */
@@ -3681,6 +3682,7 @@ export namespace StencilComponents {
     * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `250`.
     */
     'debounce': number;
+    'focus': () => void;
     /**
     * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
     */
@@ -4695,6 +4697,7 @@ export namespace StencilComponents {
     * If true, the user cannot interact with the textarea. Defaults to `false`.
     */
     'disabled': boolean;
+    'focus': () => void;
     /**
     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.
     */