By default, trailing zeros disappear when the NumericTextBox gets focus. However, you can use the following sample to maintain the trailing zeros while focusing the NumericTextBox.
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class App extends React.Component<{}, {}> {
public numericInstance: any;
constructor(props:any) {
super(props);
this.onNumericFocus = this.onNumericFocus.bind(this);
}
public onNumericFocus() : void {
this.numericInstance.element.value = this.numericInstance.formattedValue(this.numericInstance.decimals, parseFloat(this.numericInstance.element.value));
}
public render() {
return (
<NumericTextBoxComponent id="numeric" decimals={2} format={"n2"} ref={(numeric) => { this.numericInstance = numeric as NumericTextBoxComponent; }} value={10} change={this.onNumericFocus} focus={this.onNumericFocus}/>
);
}
}
ReactDOM.render(<App />, document.getElementById('numeric1'));
#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
margin: 35px auto;
width: 240px;
padding-top: 100px;
}