'Ant Design Number Input Not updating when tabbing through fields
Hi I am experiencing very strange behavior in my react app using ant design NumberInput component. I have 3 NumberInputs all bound to the same state variable, this is my code:
import React from 'react';
import ReactDOM from 'react-dom';
import { version, InputNumber } from "antd";
class Bug extends React.Component {
state = {
value: 0
};
onChange = (value) => {
this.setState({ value });
}
render() {
const { value } = this.state;
return (
<div className="App">
<div>Version {version}</div>
<p>
<InputNumber value={value} onChange={this.onChange} />
<InputNumber value={value} onChange={this.onChange} />
<InputNumber value={value} onChange={this.onChange} />
</p>
</div>
);
}
}
ReactDOM.render(<Bug />, document.getElementById("root"));
When I change the value in the first input, all three update correctly, then I press the tab button on the keyboard to move to the next input, now when I change the value only the second and third input update. You can see the behavior in the gif below
This is part of a much larger project with many dependencies, when I create a blank react+antd app using create-react-app I was unable to reproduce to issue.
The issue ONLY occurs on the NumberInput component, and not any of the other components from the Ant Design library.
The issue also ONLY occurs when I TAB through the NumberInputs, if I use the mouse and click on the next NumberInput and change the value, all three inputs update to the same value.
My Project uses the following:
- React 17.0.2
- Ant Design 4.16.13
- TypeScript
Has anyone run into something similar?
I replaced the Ant Design NumberInput component with a basic input of type number, and everything works as expected:
onChange = (e) => {
this.setState({ value: e.target.value });
}
render() {
const { value } = this.state;
return (
<div className="App">
<div>Version {version}</div>
<p>
<input type='number' value={value} onChange={this.onChange} />
<input type='number' value={value} onChange={this.onChange} />
<input type='number' value={value} onChange={this.onChange} />
</p>
</div>
);
}
What is strange that changing the NumberInput to a input of type number leads me to believe there is a problem with the Ant NumberInput component, however, in a clean react app the NumberInput works which leads to me to believe there might be a something in my project causing the issue, even though I removed all the code and just have a very basic class.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|


