[@mantine/core] NumberInput: Fix incorrect onChange value with high p…

…recision (#518)

* Fix for #516

* Fix for #519

* Add use-os story

* Formatting error corrected

* Added a check for the precision on blur

src/mantine-core/src/components/NumberInput/NumberInput.test.tsx

@@ -155,6 +155,21 @@ describe('@mantine/core/NumberInput', () => {
     expect(input.getDOMNode().getAttribute('value')).toBe('');
   });
 
+  it('precision on blur', () => {
+    const spy = jest.fn();
+    const element = mount(
+      <NumberInput value={undefined} max={10} min={0} step={6} precision={2} onChange={spy} />
+    );
+
+    const input = element.find('input').at(0);
+    //change value to 6.123, blur and that should be result in a rounded result of 6.12
+    input.simulate('change', { target: { value: '6.123' } });
+    expect(spy).toHaveBeenLastCalledWith(6.123);
+    input.simulate('blur', { target: { value: '6.123' } });
+    expect(input.getDOMNode().getAttribute('value')).toBe('6.12');
+    expect(spy).toHaveBeenLastCalledWith(6.12);
+  });
+
   it('sets state to min or 0 if input is empty and is incremented/decremented', () => {
     const spy = jest.fn();
     const element = mount(

src/mantine-core/src/components/NumberInput/NumberInput.tsx

@@ -197,7 +197,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
         if (!Number.isNaN(val)) {
           if (!noClampOnBlur) {
             setTempValue(val.toFixed(precision));
-            handleValueChange(val);
+            handleValueChange(parseFloat(val.toFixed(precision)));
           }
         } else {
           setTempValue(finalValue?.toFixed(precision) ?? '');

src/mantine-hooks/src/use-os/use-os.story.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { useOs } from './use-os';
+
+const Demo = () => {
+  const os = useOs();
+
+  return (
+    <>
+      Your os is <b>{os}</b>
+    </>
+  );
+};
+
+storiesOf('@mantine/hooks/use-os', module).add('Usage', () => (
+  <div style={{ padding: 40 }}>
+    <Demo />
+  </div>
+));

src/mantine-hooks/src/use-os/use-os.ts

@@ -16,7 +16,7 @@ function getOS() {
     os = 'windows';
   } else if (/Android/.test(userAgent)) {
     os = 'android';
-  } else if (!os && /Linux/.test(platform)) {
+  } else if (/Linux/.test(platform)) {
     os = 'linux';
   }