Merge branch '21128-toolbar-context-menu'

[arvados-workbench2.git] / src / components / float-input / float-input.tsx

diff --git a/src/components/float-input/float-input.tsx b/src/components/float-input/float-input.tsx
index b032319a7e1c83c37c5890990c1192e647210b46..1b909306b35a0eba67bcb241b653e55efa18d54a 100644 (file)
--- a/src/components/float-input/float-input.tsx
+++ b/src/components/float-input/float-input.tsx
@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from 'react';
+import React from 'react';
 import { Input } from '@material-ui/core';
 import { InputProps } from '@material-ui/core/Input';
 
@@ -15,13 +15,17 @@ export class FloatInput extends React.Component<InputProps> {
         const { onChange = () => { return; } } = this.props;
         const [, fraction] = event.target.value.split('.');
         this.setState({ endsWithDecimalSeparator: fraction === '' });
+        const parsedValue = parseFloat(event.target.value).toString();
+        event.target.value = parsedValue;
         onChange(event);
     }
 
     render() {
+        const parsedValue = parseFloat(typeof this.props.value === 'string' ? this.props.value : '');
+        const value = isNaN(parsedValue) ? '' : parsedValue.toString();
         const props = {
             ...this.props,
-            value: this.props.value + (this.state.endsWithDecimalSeparator ? '.' : ''),
+            value: value + (this.state.endsWithDecimalSeparator ? '.' : ''),
             onChange: this.handleChange,
         };
         return <Input {...props} />;