feat(input): add getInputElement() (#17183)

expose internal <input> element

fixes #17174

angular/src/directives/proxies.ts

@@ -342,7 +342,7 @@ export class IonInput {
     proxyOutputs(this, this.el, ['ionInput', 'ionChange', 'ionBlur', 'ionFocus']);
   }
 }
-proxyMethods(IonInput, ['setFocus']);
+proxyMethods(IonInput, ['setFocus', 'getInputElement']);
 proxyInputs(IonInput, ['color', 'mode', 'accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'debounce', 'disabled', 'inputmode', 'max', 'maxlength', 'min', 'minlength', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'spellcheck', 'step', 'size', 'type', 'value']);
 
 export declare interface IonItem extends StencilComponents<'IonItem'> {}
@@ -689,7 +689,7 @@ export class IonSearchbar {
     proxyOutputs(this, this.el, ['ionInput', 'ionChange', 'ionCancel', 'ionClear', 'ionBlur', 'ionFocus']);
   }
 }
-proxyMethods(IonSearchbar, ['setFocus']);
+proxyMethods(IonSearchbar, ['setFocus', 'getInputElement']);
 proxyInputs(IonSearchbar, ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value']);
 
 export declare interface IonSegment extends StencilComponents<'IonSegment'> {}
@@ -868,7 +868,7 @@ export class IonTextarea {
     proxyOutputs(this, this.el, ['ionChange', 'ionInput', 'ionBlur', 'ionFocus']);
   }
 }
-proxyMethods(IonTextarea, ['setFocus']);
+proxyMethods(IonTextarea, ['setFocus', 'getInputElement']);
 proxyInputs(IonTextarea, ['mode', 'color', 'autocapitalize', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'value']);
 
 export declare interface IonThumbnail extends StencilComponents<'IonThumbnail'> {}

core/api.txt

@@ -420,6 +420,7 @@ ion-input,prop,spellcheck,boolean,false,false,false
 ion-input,prop,step,string | undefined,undefined,false,false
 ion-input,prop,type,"date" | "email" | "number" | "password" | "search" | "tel" | "text" | "time" | "url",'text',false,false
 ion-input,prop,value,null | string | undefined,'',false,false
+ion-input,method,getInputElement,getInputElement() => Promise<HTMLInputElement>
 ion-input,method,setFocus,setFocus() => void
 ion-input,event,ionBlur,void,true
 ion-input,event,ionChange,InputChangeEventDetail,true
@@ -887,6 +888,7 @@ ion-searchbar,prop,showCancelButton,boolean,false,false,false
 ion-searchbar,prop,spellcheck,boolean,false,false,false
 ion-searchbar,prop,type,"email" | "number" | "password" | "search" | "tel" | "text" | "url",'search',false,false
 ion-searchbar,prop,value,null | string | undefined,'',false,false
+ion-searchbar,method,getInputElement,getInputElement() => Promise<HTMLInputElement>
 ion-searchbar,method,setFocus,setFocus() => void
 ion-searchbar,event,ionBlur,void,true
 ion-searchbar,event,ionCancel,void,true
@@ -1091,6 +1093,7 @@ ion-textarea,prop,rows,number | undefined,undefined,false,false
 ion-textarea,prop,spellcheck,boolean,false,false,false
 ion-textarea,prop,value,null | string | undefined,'',false,false
 ion-textarea,prop,wrap,"hard" | "off" | "soft" | undefined,undefined,false,false
+ion-textarea,method,getInputElement,getInputElement() => Promise<HTMLTextAreaElement>
 ion-textarea,method,setFocus,setFocus() => void
 ion-textarea,event,ionBlur,void,true
 ion-textarea,event,ionChange,TextareaChangeEventDetail,true

core/src/components.d.ts

@@ -1644,6 +1644,10 @@ export namespace Components {
     */
     'disabled': boolean;
     /**
+    * Returns the native `<input>` element used under the hood.
+    */
+    'getInputElement': () => Promise<HTMLInputElement>;
+    /**
     * 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"`.
     */
     'inputmode'?: string;
@@ -3692,6 +3696,10 @@ export namespace Components {
     */
     'debounce': number;
     /**
+    * Returns the native `<input>` element used under the hood.
+    */
+    'getInputElement': () => Promise<HTMLInputElement>;
+    /**
     * The mode determines which platform styles to use.
     */
     'mode': Mode;
@@ -4531,6 +4539,10 @@ export namespace Components {
     */
     'disabled': boolean;
     /**
+    * Returns the native `<textarea>` element used under the hood.
+    */
+    'getInputElement': () => Promise<HTMLTextAreaElement>;
+    /**
     * 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.
     */
     'maxlength'?: number;

core/src/components/input/input.tsx

@@ -247,6 +247,14 @@ export class Input implements ComponentInterface {
     }
   }
 
+  /**
+   * Returns the native `<input>` element used under the hood.
+   */
+  @Method()
+  getInputElement(): Promise<HTMLInputElement> {
+    return Promise.resolve(this.nativeInput!);
+  }
+
   private getValue(): string {
     return this.value || '';
   }

core/src/components/input/readme.md

@@ -150,6 +150,16 @@ It is meant for text `type` inputs only, such as `"text"`, `"password"`, `"email
 
 ## Methods
 
+### `getInputElement() => Promise<HTMLInputElement>`
+
+Returns the native `<input>` element used under the hood.
+
+#### Returns
+
+Type: `Promise<HTMLInputElement>`
+
+
+
 ### `setFocus() => void`
 
 Sets focus on the specified `ion-input`. Use this method instead of the global

core/src/components/searchbar/readme.md

@@ -115,6 +115,16 @@ A Searchbar should be used instead of an input to search lists. A clear button i
 
 ## Methods
 
+### `getInputElement() => Promise<HTMLInputElement>`
+
+Returns the native `<input>` element used under the hood.
+
+#### Returns
+
+Type: `Promise<HTMLInputElement>`
+
+
+
 ### `setFocus() => void`
 
 Sets focus on the specified `ion-searchbar`. Use this method instead of the global

core/src/components/searchbar/searchbar.tsx

@@ -168,6 +168,14 @@ export class Searchbar implements ComponentInterface {
     }
   }
 
+  /**
+   * Returns the native `<input>` element used under the hood.
+   */
+  @Method()
+  getInputElement(): Promise<HTMLInputElement> {
+    return Promise.resolve(this.nativeInput!);
+  }
+
   /**
    * Clears the input field and triggers the control change.
    */

core/src/components/textarea/readme.md

@@ -132,6 +132,16 @@ The textarea component accepts the [native textarea attributes](https://develope
 
 ## Methods
 
+### `getInputElement() => Promise<HTMLTextAreaElement>`
+
+Returns the native `<textarea>` element used under the hood.
+
+#### Returns
+
+Type: `Promise<HTMLTextAreaElement>`
+
+
+
 ### `setFocus() => void`
 
 Sets focus on the specified `ion-textarea`. Use this method instead of the global

core/src/components/textarea/textarea.tsx

@@ -182,6 +182,14 @@ export class Textarea implements ComponentInterface {
     }
   }
 
+  /**
+   * Returns the native `<textarea>` element used under the hood.
+   */
+  @Method()
+  getInputElement(): Promise<HTMLTextAreaElement> {
+    return Promise.resolve(this.nativeInput!);
+  }
+
   private emitStyle() {
     this.ionStyle.emit({
       'interactive': true,