fix: #2692 Tabbing / clicking / returning out of a number field round your input

Composer/packages/extensions/adaptive-form/src/components/fields/NumberField.tsx

@@ -1,18 +1,21 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import React from 'react';
-import { SpinButton } from 'office-ui-fabric-react/lib/SpinButton';
+
 import { FieldProps } from '@bfc/extension';
 import formatMessage from 'format-message';
+import { SpinButton } from 'office-ui-fabric-react/lib/SpinButton';
+import React from 'react';
 
 import { FieldLabel } from '../FieldLabel';
 
+const floatNumberOfDecimals = 2;
+
 const getInt = (value: string, step: number) => {
   return parseInt(value, 10) + step;
 };
 
 const getFloat = (value: string, step: number) => {
-  const fixed = (parseFloat(value) + step).toFixed(step !== 0 ? `${step}`.split('.')[1].length : step);
+  const fixed = (parseFloat(value) + step).toFixed(floatNumberOfDecimals);
 
   return parseFloat(fixed);
 };
@@ -36,7 +39,7 @@ const NumberField: React.FC<FieldProps> = (props) => {
     onChange(newValue);
   };
 
-  const step = type === 'integer' ? 1 : 0.1;
+  const step = type === 'integer' ? 1 : Math.pow(10, -floatNumberOfDecimals);
   const displayValue = typeof value === 'number' ? value.toString() : '';
 
   return (

Composer/packages/extensions/adaptive-form/src/components/fields/__tests__/NumberField.test.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 import React from 'react';
-import { render, fireEvent, prettyDOM, waitFor } from '@bfc/test-utils';
+import { render, fireEvent } from '@bfc/test-utils';
 import assign from 'lodash/assign';
 
 import { NumberField } from '../NumberField';
@@ -16,28 +16,28 @@ function renderSubject(overrides = {}) {
 
 describe('<NumberField />', () => {
   describe('when type is number', () => {
-    it('changes the number by 0.1', async () => {
+    it('changes the number by 0.01', async () => {
       const onChange = jest.fn();
       const schema = {
         type: 'number',
       };
 
       const { getByLabelText } = renderSubject({ onChange, schema });
-      const upButton = getByLabelText('increment by 0.1');
-      const downButton = getByLabelText('decrement by 0.1');
+      const upButton = getByLabelText('increment by 0.01');
+      const downButton = getByLabelText('decrement by 0.01');
 
       fireEvent.mouseDown(upButton);
       fireEvent.mouseUp(upButton);
 
       expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange).toHaveBeenCalledWith(0.1);
+      expect(onChange).toHaveBeenCalledWith(0.01);
       onChange.mockReset();
 
       fireEvent.mouseDown(downButton);
       fireEvent.mouseUp(downButton);
 
       expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange).toHaveBeenCalledWith(-0.1);
+      expect(onChange).toHaveBeenCalledWith(-0.01);
     });
   });