Maintain trailing zeros in NumericTextBox in React NumericTextBox component

24 Jun 2022 / 1 minute to read

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.

Source

Preview

index.jsx

styles.css

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 {
    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'));

#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;
}

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'));