Maintain trailing zeros in NumericTextBox in React

21 Feb 20263 minutes to read

By default, the NumericTextBox removes trailing zeros when the component receives focus (to allow easy editing of numeric values). However, when you need to preserve trailing zeros for currency formatting or precision display, use the following sample to maintain trailing zeros while focusing the NumericTextBox.

index.jsx

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 {
    numericInstance;
    constructor(props) {
        super(props);
        this.onNumericFocus = this.onNumericFocus.bind(this);
    }
    onNumericFocus() {
        this.numericInstance.element.value = this.numericInstance.formattedValue(this.numericInstance.decimals, parseFloat(this.numericInstance.element.value));
    }
    render() {
        return (<NumericTextBoxComponent id="numeric" decimals={2} format={"n2"} ref={(numeric) => { this.numericInstance = numeric; }} value={10} change={this.onNumericFocus} onFocus={this.onNumericFocus}/>);
    }
}
ReactDOM.render(<App />, document.getElementById('numeric1'));

index.tsx

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} onFocus={this.onNumericFocus}/>
        );
    }
}
ReactDOM.render(<App />, document.getElementById('numeric1'));