Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(input, searchbar, textarea): ensure nativeInput is always available #28362

Merged
merged 1 commit into from
Oct 23, 2023

Conversation

thetaPC
Copy link
Contributor

@thetaPC thetaPC commented Oct 16, 2023

Issue number: resolves #28283


What is the current behavior?

getInputElement() is used to access the native input. If the component has yet to render, then the function will return undefined. This happens mostly when using ref on React.

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

What is the new behavior?

  • getInputElement() will wait to return once the component is ready.

Does this introduce a breaking change?

  • Yes
  • No

Other information

Dev build: 7.5.1-dev.11697488622.175c9183

@github-actions github-actions bot added the package: core @ionic/core package label Oct 16, 2023
@thetaPC thetaPC marked this pull request as ready for review October 16, 2023 20:50
@brandyscarney brandyscarney requested a review from a team October 20, 2023 15:43
Copy link
Contributor

@sean-perkins sean-perkins left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verified on a forked reproduction that this works: https://stackblitz.com/edit/bpfynd-ut2exw?file=src%2Fmain.tsx

Great job!

@thetaPC thetaPC added this pull request to the merge queue Oct 23, 2023
Merged via the queue into main with commit 2b015b2 Oct 23, 2023
@thetaPC thetaPC deleted the FW-5297 branch October 23, 2023 17:25
sean-perkins pushed a commit that referenced this pull request Oct 27, 2023
…le (#28362)

Issue number: resolves #28283 

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

`getInputElement()` is used to access the native input. If the component
has yet to render, then the function will return `undefined`. This
happens mostly when using `ref` on React.

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

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- `getInputElement()` will wait to return once the component is ready.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.5.1-dev.11697488622.175c9183`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bug: getInputElement does not wait for element to be rendered
3 participants