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

expose internal <input> element

fixes #17174

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,