From 05ffc12c9e908b486f66023432fb78ac56346fa6 Mon Sep 17 00:00:00 2001
From: PointSingularity <56246797+PointSingularity@users.noreply.github.com>
Date: Fri, 30 Sep 2022 16:34:06 +0200
Subject: [PATCH] [@mantine/core] NumberInput: Add
 'removePrecisionTrailingZeros' prop (#2547)

---
 .../src/NumberInput/NumberInput.test.tsx      | 10 ++++++++
 .../src/NumberInput/NumberInput.tsx           | 23 +++++++++++++++++--
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/mantine-core/src/NumberInput/NumberInput.test.tsx b/src/mantine-core/src/NumberInput/NumberInput.test.tsx
index 228d841191a..0a7cac5e1b0 100644
--- a/src/mantine-core/src/NumberInput/NumberInput.test.tsx
+++ b/src/mantine-core/src/NumberInput/NumberInput.test.tsx
@@ -131,6 +131,16 @@ describe('@mantine/core/NumberInput', () => {
     expect(spy).toHaveBeenLastCalledWith(6.12);
   });
 
+  it('supports removing trailing zeros with precision', async () => {
+    const spy = jest.fn();
+    render(<NumberInput precision={8} removePrecisionTrailingZeros onChange={spy} />);
+    await enterText('6.12300000');
+    expect(spy).toHaveBeenLastCalledWith(6.123);
+    blurInput();
+    expectValue('6.123');
+    expect(spy).toHaveBeenLastCalledWith(6.123);
+  });
+
   it('sets state to min if input is empty and is incremented/decremented', async () => {
     const spy = jest.fn();
     const { container } = render(<NumberInput max={10} min={0} step={6} onChange={spy} />);
diff --git a/src/mantine-core/src/NumberInput/NumberInput.tsx b/src/mantine-core/src/NumberInput/NumberInput.tsx
index 5c5439b8002..0cd44dc37ac 100644
--- a/src/mantine-core/src/NumberInput/NumberInput.tsx
+++ b/src/mantine-core/src/NumberInput/NumberInput.tsx
@@ -60,6 +60,9 @@ export interface NumberInputProps
   /** Amount of digits after the decimal point  */
   precision?: number;
 
+  /** Only works if a precision is given, removes the trailing zeros */
+  removePrecisionTrailingZeros?: boolean;
+
   /** Default value for uncontrolled variant only */
   defaultValue?: number | undefined;
 
@@ -114,6 +117,7 @@ const defaultProps: Partial<NumberInputProps> = {
   size: 'sm',
   precision: 0,
   noClampOnBlur: false,
+  removePrecisionTrailingZeros: true,
   formatter: defaultFormatter,
   parser: defaultParser,
   type: 'text',
@@ -139,6 +143,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>((props
     radius,
     variant,
     precision,
+    removePrecisionTrailingZeros,
     defaultValue,
     noClampOnBlur,
     handlersRef,
@@ -354,8 +359,22 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>((props
 
       if (!Number.isNaN(val)) {
         if (!noClampOnBlur) {
-          setTempValue(val.toFixed(precision));
-          handleValueChange(parseFloat(val.toFixed(precision)));
+          if (removePrecisionTrailingZeros) {
+            const valNoZeros = val
+              .toFixed(precision)
+              .replace(new RegExp(`[0]{0,${precision}}$`), '');
+
+            if (valNoZeros.endsWith(decimalSeparator) || valNoZeros.endsWith('.')) {
+              setTempValue(valNoZeros.slice(0, -1));
+              handleValueChange(parseFloat(valNoZeros.slice(0, -1)));
+            } else {
+              setTempValue(valNoZeros);
+              handleValueChange(parseFloat(valNoZeros));
+            }
+          } else {
+            setTempValue(val.toFixed(precision));
+            handleValueChange(parseFloat(val.toFixed(precision)));
+          }
         }
       } else {
         setTempValue(finalValue?.toFixed(precision) ?? '');