Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Ionic Components Dont Respond to onChange on onBlur For Validation

See original GitHub issue

Please consider asking the question at our spectrum channel.

Describe the question? I am just confirming that the only way to get Ionic Components to properly validate onChange or onBlur is to trigger it directly based on the event or to wrap it in a control.

To Reproduce See Link to sample project, if I remove the event listener from the component it fails, the getInputElement() only work on IonInput and there are more complex components like IonRadioButtonGroup that also dont provide access to the proper element.

I am fine if this is the appropriate solution, I just dont want to post a blog with a hack if there is a better way

Codesandbox link https://codesandbox.io/s/react-hook-form-ionic-input-components-29zur

Screenshots If applicable, add screenshots to help explain your problem.

Additional context Add any other context about the problem here.

Issue Analytics

State:
Created 4 years ago
Comments:6 (1 by maintainers)

Top GitHub Comments

2reactions

trkochcommented, Sep 29, 2021

It appears @aaronksaunders has updated his example for v7 at https://stackblitz.com/edit/ionic-react-hook-form-me1pv4?file=src%2FApp.tsx. Thanks!

2reactions

aaronksaunderscommented, Mar 8, 2020

i switched everything over to the controller and it works fine, thanks https://codesandbox.io/s/react-hook-form-ionic-input-components-29zur

Top Results From Across the Web

react-hook-form: Validation not working when using onBlur ...

1 Answer 1 ; onChange, string, Validation will trigger on the change event with each input, and lead to multiple re-renders. Warning: this...

react-hook-form controlled input onblur doesn't work - You.com

In your code, the form mode is onBlur . it means the validation is triggered on blur event (unfocus the input). When you...

ion-input: Custom Input Value Type Styling and CSS Properties

The first way is by adding the clearInput property which will show a clear button when the input has a value . The...

Forms And Validation In Ionic React - Smashing Magazine

In this tutorial, you will learn how to build forms when working with Ionic React and how to make these forms interactive by...

How to implement React form and validate in react 18?

In uncontrolled form, where React components don't control the form state or ... inputProps} onChange={onChange} onBlur={onHandleFocus} focused={focused.