1

Current behavior: IonOnChange event for IonInput fires twice when backspacing 1 character.

Version: "@ionic/react": "5.6.11",

Expected behavior: When value is 1 character and backspace is pressed, input value should be empty.

Steps to reproduce: If I enter any 10 characters, lets say "randomstring", into the input ,the value is now randomstring and then I press backspace to completely erase the value inside the input field, onChange event fires and input is empty, then onChange event fires a 2nd time with value of "r" (or what the previous character was) and input goes back to "r" (or the previous character) again. If i keep hitting backspace repeatedly the same thing happens until eventually the input clears.

Related Code:

<IonInput
        style={{ border: "1px solid black" }}
        onIonChange={handlePostcodeChange}
        value={postCodeInputValue}
        placeholder="Postcode"
        pattern="/^[a-z0-9]+$/i"
        maxlength={10}
        type="text"
      />

Reproducible Code Link : CodeSandbox Link

UPDATE : This is an issue in ionic ,and the I've raised the bug too. https://github.com/ionic-team/ionic-framework/issues/25287

jarivak
  • 828
  • 13
  • 28
  • tried it, never happen to me. Maybe try to increase your debounce time? – Omri Attiya May 14 '22 at 17:41
  • Please try deleting the entire word quickly, you will be able to see it. – jarivak May 14 '22 at 17:43
  • it is like , type 10 character length string/number and press the backspace and don't lift the backspace until it clears the last word. You will be able to see that the onchange function triggering twice. you can see the same in console as well. – jarivak May 14 '22 at 17:44
  • I'm pretty sure the `setTimeout` is making this (if you remove it , it looks ok). Why not use lodash debounce? – Omri Attiya May 14 '22 at 17:47
  • 1
    I have a restriction from my org, cannot use the libraries. – jarivak May 14 '22 at 18:10

0 Answers0