Delay formatting input - reactjs

Question

I'm trying to find a way to make an editable number with decimals.
Requirements:
I want the value readable by other components. For this reason I store it in a parent state.
The value may be updated by a fetched value. Currently this happens for multiple variables in the parent component.
It doesn't matter if the actual value has more places as long as the input only shows x places.
I'm running into a problem when converting to the fixed value - specifically on Chrome which happens to be the browser of choice. I wrote up a codepen:
https://codepen.io/j1dopeman/pen/wQJNzQ
Only C is using the fixed value. It's stored in the parent state as 'places'. When trying to edit C it immediately converts it to the fixed value which moves the cursor and ruins the input. Backspace also doesn't work as expected. I've tried debouncing the change which didn't work - react won't show the change in the meantime and the second number will get messed up when it eventually updates. I've tried using local state but that interferes with an outside fetch propagating the values down and I think there were other problems too. I just want to enforce the decimal places but not immediately. Someone should be able to type 1.25 or backspace and type a new number with it doing the conversion like a second later.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
inputs: {
a: { val: 0 },
b: { val: 0 },
c: { val: 1.5, places: 2 },
d: { val: 0 },
e: { val: 0 },
f: { val: 0 }
}
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(value) {
const update = newVals => {
return state => {
let nv = {};
for (let [key, val] of Object.entries(newVals)) {
nv = { ...nv, [key]: Object.assign(state.inputs[key], val) };
}
const ni = Object.assign(state.inputs, nv);
return { inputs: ni };
};
};
//-----
this.setState(update(value));
}
render() {
return (
<div className="App">
<header className="App-header">
<h1>Calc</h1>
</header>
<InputArea
inputs={this.state.inputs}
onInputChange={this.handleInputChange}
/>
</div>
);
}
}
class InputArea extends React.Component {
constructor(props) {
super(props);
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(value) {
this.props.onInputChange(value);
}
render() {
const inputList = [];
for (let [key, value] of Object.entries(this.props.inputs)) {
inputList.push(
<Variable
key={key}
name={key}
value={value}
onInputChange={this.handleInputChange}
/>
);
}
return (
<div className="input">
<h1>Input</h1>
<div className="input-area">{inputList}</div>
</div>
);
}
}
class Variable extends React.Component {
constructor(props) {
super(props);
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(e) {
let v = this.props.value;
v.val = Number(e.target.value);
this.props.onInputChange({ [this.props.name]: v });
}
render() {
const label = this.props.name;
let val = this.props.value.val;
if (this.props.value.places !== undefined)
val = val.toFixed(this.props.value.places);
return (
<div className="flex-row">
<label>{label}</label>
<input
className="variable-input"
type="number"
name={label}
value={val}
step="any"
onChange={this.handleInputChange}
/>
</div>
);
}
}

Answer 1

So wrapping with parseFloat:
val = parseFloat(val.toFixed(this.props.value.places));
seems to not completely botch the input as the person is typing and backspace mostly works. So that's what I'm using for now. I would still like to know if there's a way to delay formatting an input.