Search results

Maintain trailing zeros in NumericTextBox in React NumericTextBox component

18 Oct 2021 / 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.tsx
styles.css
Copied to clipboard
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'));
Copied to clipboard
#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;
}