Handled intial value formatting

Author: josephmathew900

src/components/Input/index.jsx

@@ -50,7 +50,8 @@ const Input = forwardRef(
     const errorId = `error_${id}`;
     const helpTextId = `helpText_${id}`;
 
-    const value = otherProps.value ?? valueInternal ?? "";
+    const value =
+      formatWithPrecision(otherProps.value, precision) ?? valueInternal ?? "";
 
     const valueLength = value?.toString().length || 0;
     const isCharacterLimitVisible = valueLength >= maxLength * 0.85;

src/components/Input/utils.js

@@ -1,4 +1,3 @@
-import { isNotPresent } from "neetocist";
 import { replace } from "ramda";
 
 const toFixed = (numStr, precision) => {
@@ -15,7 +14,7 @@ const isValidNumberString = numStr => {
 };
 
 export const formatWithPrecision = (value, precision) => {
-  if (precision < 0) return value;
+  if (precision < 0 || !value) return value;
 
   const str = value.toString();
 
@@ -25,10 +24,9 @@ export const formatWithPrecision = (value, precision) => {
 };
 
 export const enforceDecimalPrecision = (value, precision) => {
-  if (precision < 0) return value;
+  if (precision < 0 || !value) return value;
 
   const valueStr = value.toString();
-  if (isNotPresent(valueStr)) return "";
 
   if (precision === 0) return valueStr.split(".")[0];
 

stories/Components/Input.stories.jsx

@@ -199,7 +199,11 @@ RejectCharsInputStory.parameters = {
 };
 
 const PrecisionInputStory = args => (
-  <Input {...args} label="Input (up to 2 decimal places)" precision={2} />
+  <Input
+    label={`Input (up to ${args.precision} decimal places)`}
+    precision={args.precision}
+    {...args}
+  />
 );
 
 PrecisionInputStory.storyName = "Precision";

tests/Input.test.jsx

@@ -182,5 +182,19 @@ describe("Input", () => {
     await userEvent.clear(input);
     await userEvent.type(input, "45.67");
     expect(input).toHaveValue("4567");
+
+    rerender(<Input label="label" />);
+    await userEvent.clear(input);
+    await userEvent.type(input, "45.677");
+    expect(input).toHaveValue("45.677");
+
+    rerender(<Input label="label" precision={2} value={45.677} />);
+    expect(input).toHaveValue("45.68");
+
+    rerender(<Input label="label" precision={3} value={45.6} />);
+    expect(input).toHaveValue("45.600");
+
+    rerender(<Input label="label" value={45.677} />);
+    expect(input).toHaveValue("45.677");
   });
 });