How to unfocus the InputNumber antd element?

Question

I am having this issue with the code that when I try to change the value of InputNumber using onchange event, the focus gets shifted to First InputNumber element and not where I desire to change. So this leads to scrolling of the page on every change of InputNumber
Here is my minimal piece of code:
Minimal Code

Help would be appreciated.

Answer 1

One solution is to create refs of these inputs at your parent component and then use the focus function whenever a change occurs.

class DemoComp extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef1 = React.createRef();
    this.inputRef2 = React.createRef();
  }

  getInputNumber = (e, para, inputRef) => {
    console.log(e, para);
    storeInputNumber[e] = para;
    inputRef.focus();
  };

and

      <InputNumber
        id="input 2"
        ref={input => {
          this.inputRef1 = input;
        }}
        onChange={e => {
          this.getInputNumber(e, "input 2", this.inputRef1);
        }}
      />

same is for the other input.

Check my codesandbox

https://codesandbox.io/s/practical-newton-918jn