onIonChange is triggering more than one input on Ionic 5 React

Issue

I have multiple inputs, each in it's own IonItem. I'm using onIonChange to set the value of the input to the value typed by the user. But when I click in one input other inputs activate, as if the onIonChange is triggering them. Below is a sample of my component:

const ReservationForm: React.FC = () => {

 const [name, setName] = useState<string>();
 const [email, setEmail] = useState<string>();
 const [phone, setPhone] = useState<number>();

return (
  <IonList>
     <IonItemDivider className="backgroundPrimary">Guest</IonItemDivider>
     <IonItem>
        <IonLabel position="stacked">Name</IonLabel>
        <IonInput value={name} onIonChange={e => setName(e.detail.value!)}></IonInput>
     </IonItem>
     <IonItem>
        <IonLabel position="stacked">Email</IonLabel>
        <IonInput value={email} onIonChange={e => setEmail(e.detail.value!)}></IonInput>
     </IonItem>
     <IonItem>
        <IonLabel position="stacked">Phone Number</IonLabel>
        <IonInput type="number" value={phone} onIonChange={e => setPhone(parseInt(e.detail.value!, 10))}></IonInput>
    </IonItem>
 </IonList>
);
};
export default ReservationForm;

Here is an image of the problem:

as you can see I typed a letter in email but the floating label on phone number was trigger as well. Am I doing something wrong with useState or is this something wrong with the binding? Any help appreciated.

I'm using Ionic 5 with React

Solution

There seems to be an issue with onIonChange event due to which on first input it gets triggered on every IonInput and returns an undefined value for each element which is not a target. Now if we set the value to parseInt(e.detail.value!, 10) in state, each time onIonChange is triggered on the number input

To fix it you can add a conditional check for undefined

<IonItem>
    <IonLabel position="floating">Phone Number</IonLabel>
    <IonInput
      type="number"
      value={phone}
      onIonChange={e => {
        if (e.detail.value === undefined) return;
        setPhone(parseInt(e.detail.value!, 10));
      }}
    />
</IonItem>

The above solution will temporarily work for you but I will suggest you raise a Issue about this on github.

Working demo with the above solution

Answered By - Shubham Khatri