bug: getInputElement does not wait for element to be rendered

[sean-perkins]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

Ionic Framework offers an API on certain form controls, such as on ion-input, to access the HTML form element that is rendered inside the web component.

This API is typically named getInputElement and is useful when a developer needs access to the input/textarea form control element to attach additional functionality.

A key feature where this is used is in input masking, where libraries like Maskito need access to the form element to attach the input masking behavior.

When using Ionic's API, the element is not always initially available until after the component template renders. As a result, developers that try to access the method will return an element reference that is undefined. As a result, developers need to hack around this limitation by either waiting a period with setTimeout or using requestAnimationFrame to give enough time for the web component to render, prior to accessing the element reference. This is an extra implementation detail and not developer friendly.

This is most prevalent when trying to access the element reference inside of the ref binding in React.

<IonInput ref={async input => {
  const nativeInput = await input.getInputElement();
  // nativeInput is undefined
}} />

Expected Behavior

Since all public method APIs with Ionic's web components are asynchronous, Ionic should wait to resolve the element reference until after the web component has rendered.

For instance:

private nativeInput: HTMLInputElement;
private componentReadyResolve!: () => void;
private componentReady = new Promise<void>((resolve) => (this.componentReadyResolve = resolve));

componentDidLoad() {
  this.componentReadyResolve();
}

@Method()
async getInputElement(): Promise<HTMLInputElement> {
  await this.componentReady;
  return this.nativeInput!;
}

render() {
  return (
    <input ref={ref => (this.nativeInput = ref)} />
  );
}

Steps to Reproduce

1. See "Current Behavior" and/or reproduction
2. Observe: In reproduction, alert will be presented when the element reference is undefined

Code Reproduction URL

https://stackblitz.com/edit/bpfynd?file=src%2Fmain.tsx

Ionic Info

N/A

Additional Information

No response

[thetaPC]

Thank you for submitting the issue! There's a dev build with a fix:
npm install @ionic/react@7.5.1-dev.11697488622.175c9183 @ionic/react-router@7.5.1-dev.11697488622.175c9183

Feel free to test it out.

[thetaPC]

Thanks for the issue! This has been resolved via #28362 and will be available in an upcoming release of Ionic.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.