Race condition with onIonChange on mobile view only (Ionic 7 React)

Ionic Framework Ionic React
1

Hi! I’m running Ionic 7 react (@ionic/core@7.7.0 @ionic/react@7.7.0 react@18.2.0) and running into a problem specifically on mobile. This can be replicated on desktop using Chrome developer tools and choosing an android device to emulate like “Samsung Galaxy S8+”. For some reason this does not happen when the app is running in normal browser mode.

Code:

const TestPage: React.FC = () => {
    
    const [ myValue, setMyValue ] = useState("original value");
    
    const submitForm = (e: any) => {
        console.log("submitForm with value: ", myValue);
    }

  return (
    <IonPage>
        <IonInput value={ myValue } onIonChange={ (e) => setMyValue(e.detail.value) } />
        
        <IonButton onClick={submitForm}>Fake submit</IonButton>
    </IonPage>
  );
};

I type in “new value” in the text box and click “Fake Submit” button (while the cursor is still bliking in the text box.

What’s logged:

submitForm with value: original value

According to this stackoverflow post ( javascript - React: potential race condition for Controlled Components - Stack Overflow ) this should not be happening.

Is there an elegant way to fix this without having to swtich the onIonChange to onIonInput? I feel like onIonInput would be an overkill since it keeps doing the update anytime you put a new character in there (yes, you can debounce, but won’t debounce also cause the delay at the end allowing the race condition to happen)