'AntD React InputNumber Increase/Decrease buttons appear to start infinite loop

I am experiencing some unusual behaviour with AntD InputNumber component, specifically using the up/down incrementation buttons:

enter image description here

I have a very basic implementation of the component as follows:

<InputNumber min={1} max={10} defaultValue={3} onChange={changeWeight} />

calling function:

  function changeWeight(weight) {
    console.log(weight);
  }

On the face of it, it all seems to work fine, as I click on the increment button, I see the result in my console for each click. 3 clicks up and my console reads:

enter image description here

Great! However, if I then place a debugger inside the called function like so:

  function changeWeight(weight) {
    debugger;
    console.log(weight);
  }

then refresh the screen and hit the increment button once, I hit my breakpoint, console is logged, I hit continue then instead of the process finishing, it goes straight back to the breakpoint again. The function is called again and again infinitely it seems. I have found if you put a max value on the InputNumber component it does stop at that number. The below console log is from hitting the button just once, but the breakpoint being hit many times...

enter image description here

Again, if I remove the debugger breakpoint, all seems normal and the console logs just the once when the button is clicked.

Also, if I type numbers into the component it only hits the debugger breakpoint once. Just these buttons seem to be causing a problem.

Has anyone else experienced this or have any ideas as to what may be causing it? I am very confused.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source