Bug: [Ionic-React]. <IonInput/> Controlled component doesn't work.

Bug Report

Ionic version:

[x] 4.4.2

Ionic-React version

[x] 0.0.5

Current behavior:

<IonInput />'s onChange is not fired.

<IonInput />'s value is set to state from onInput, but the state is not set to value={}. The <IonInput />-component’s state is not really being controlled.

Expected behavior:

Input’s value is same as state.

1. Input is handled by onChange method
2. Input length is checked.

• If length <= 5 then update state
• else don’t

1. <IonInput />'s value is same as state

Steps to reproduce:

I created two state variables, value1 and value2, and setters using the useState()-hook. I created a controlled <IonInput /> and a controlled <input />. The regular <input /> is controlled as expected. No more than 5 characters can be placed there. The <IonInput />'s input is correctly set to state and restricted to 5 characters, however the <IonInput /> continues to take in characters.

I ran in to the issue by following the guide from: https://ionicframework.com/blog/using-react-hooks-in-an-ionic-react-app/

Related code:

https://ionicframework.com/blog/using-react-hooks-in-an-ionic-react-app/

Other information:

Ionic info:

➜  ionic-react-test git:(valtsuDev) ✗ ionic info

Ionic:

   ionic (Ionic CLI) : 4.12.0 (/home/[redacted]/.nvm/versions/node/v12.2.0/lib/node_modules/ionic)

Capacitor:

   capacitor (Capacitor CLI) : 1.0.0-beta.24
   @capacitor/core           : 1.0.0

System:

   NodeJS : v12.2.0 (/home/[redacted]/.nvm/versions/node/v12.2.0/bin/node)
   npm    : 6.9.0
   OS     : Linux 4.4

[calendee]

After looking at the docs ☺️, maybe we shouldn’t be using these React events?

Recognized Events : ionBlur, ionChange, ionFocus, ionInput.

So you can do this:

<IonInput
  id="firstName"
  name="firstName"
  onIonChange={setFirstName}
  onSubmit={() => {
    login(null);
  }}
  placeholder="Enter your first name"
  value={firstName}
></IonInput>

[ionitron-bot[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.