Added support for precision prop for Input component (#2487)

* Added support for precision prop for Input component

* Jest test

* Added proptype

* Added precision logic fo onchange

* Added storybook description

* Handled intial value formatting

Author: josephmathew900

src/components/Input.jsx renamed to src/components/Input/index.jsx

@@ -2,12 +2,18 @@ import React, { useState, forwardRef } from "react";
 
 import classnames from "classnames";
 import PropTypes from "prop-types";
-import { replace } from "ramda";
 
 import { useId } from "hooks";
 import { hyphenize } from "utils";
 
-import Label from "./Label";
+import {
+  enforceDecimalPrecision,
+  formatWithPrecision,
+  formatWithRejectCharsRegex,
+  getTrimmedValue,
+} from "./utils";
+
+import Label from "../Label";
 
 const SIZES = { small: "small", medium: "medium", large: "large" };
 
@@ -33,6 +39,7 @@ const Input = forwardRef(
       rejectCharsRegex,
       onBlur,
       disableTrimOnBlur = false,
+      precision = -1,
       ...otherProps
     },
     ref
@@ -43,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;
@@ -58,26 +66,27 @@ const Input = forwardRef(
 
     const isMaxLengthPresent = !!maxLength || maxLength === 0;
 
-    const handleRegexChange = e => {
-      const globalRegex = new RegExp(rejectCharsRegex, "g");
-      e.target.value = replace(globalRegex, "", e.target.value);
-      onChange(e);
-    };
-
-    const handleChange = rejectCharsRegex ? handleRegexChange : onChange;
-
-    const handleTrimmedChangeOnBlur = e => {
-      if (disableTrimOnBlur || typeof value !== "string") return;
+    const handleChange = e => {
+      let formattedValue = formatWithRejectCharsRegex(
+        e.target.value,
+        rejectCharsRegex
+      );
 
-      const trimmedValue = value.trim();
-      if (value === trimmedValue) return;
+      formattedValue = enforceDecimalPrecision(formattedValue, precision);
 
-      e.target.value = trimmedValue;
-      handleChange(e);
+      e.target.value = formattedValue;
+      onChange(e);
     };
 
     const handleOnBlur = e => {
-      handleTrimmedChangeOnBlur(e);
+      const trimmedValue = getTrimmedValue(value, disableTrimOnBlur);
+      const formattedValue = formatWithPrecision(trimmedValue, precision);
+
+      if (formattedValue !== value) {
+        e.target.value = formattedValue;
+        handleChange(e);
+      }
+
       onBlur?.(e);
     };
 
@@ -180,6 +189,15 @@ Input.propTypes = {
    * To specify the type of Input field.
    */
   type: PropTypes.string,
+  /**
+   * To specify how many decimal places to show in the input.
+   *
+   * For example, if precision is 2:
+   * 10 will be shown as "10.00"
+   * 10.1 will be shown as "10.10"
+   * 9.758 will be rounded and shown as "9.76"
+   */
+  precision: PropTypes.number,
   /**
    * To specify the label props to be passed to the Label component.
    */

src/components/Input/utils.js

@@ -0,0 +1,56 @@
+import { replace } from "ramda";
+
+const toFixed = (numStr, precision) => {
+  const num = Number(numStr);
+  if (Number.isNaN(num)) return numStr;
+
+  return num.toFixed(precision);
+};
+
+const isValidNumberString = numStr => {
+  if (typeof numStr !== "string") return false;
+
+  return !Number.isNaN(Number(numStr.trim()));
+};
+
+export const formatWithPrecision = (value, precision) => {
+  if (precision < 0 || !value) return value;
+
+  const str = value.toString();
+
+  if (isValidNumberString(str)) return toFixed(str, precision);
+
+  return str;
+};
+
+export const enforceDecimalPrecision = (value, precision) => {
+  if (precision < 0 || !value) return value;
+
+  const valueStr = value.toString();
+
+  if (precision === 0) return valueStr.split(".")[0];
+
+  const regex = new RegExp(`^\\d*\\.?\\d{0,${precision}}$`);
+  if (regex.test(valueStr)) return value;
+
+  const parts = valueStr.split(".");
+  if (parts.length === 1) return parts[0];
+
+  const [integerPart, decimalPart] = parts;
+
+  return `${integerPart}.${decimalPart.substring(0, precision)}`;
+};
+
+export const formatWithRejectCharsRegex = (value, rejectCharsRegex) => {
+  if (!rejectCharsRegex) return value;
+
+  const globalRegex = new RegExp(rejectCharsRegex, "g");
+
+  return replace(globalRegex, "", value);
+};
+
+export const getTrimmedValue = (value, disableTrimOnBlur) => {
+  if (disableTrimOnBlur || typeof value !== "string") return value;
+
+  return value.trim();
+};

stories/Components/Input.stories.jsx

@@ -198,6 +198,21 @@ RejectCharsInputStory.parameters = {
   },
 };
 
+const PrecisionInputStory = args => (
+  <Input label={`Input (up to ${args.precision} decimal places)`} {...args} />
+);
+
+PrecisionInputStory.storyName = "Precision";
+PrecisionInputStory.parameters = {
+  docs: {
+    description: {
+      story: `The prop \`precision\` will accept a number and limit the number of decimal places to the specified value.`,
+    },
+  },
+};
+
+PrecisionInputStory.args = { precision: 2, type: "number" };
+
 const CSSCustomization = args => <Input {...args} />;
 
 CSSCustomization.storyName = "Input CSS Customization";
@@ -227,6 +242,7 @@ export {
   FormikInputStory,
   RejectCharsInputStory,
   CSSCustomization,
+  PrecisionInputStory,
 };
 
 export default metadata;

tests/Input.test.jsx

@@ -158,4 +158,43 @@ describe("Input", () => {
     await userEvent.type(getByLabelText("label"), "Test");
     expect(getByLabelText("label")).toHaveValue("Test");
   });
+
+  it("should format input value correctly based on precision prop", async () => {
+    const { getByLabelText, rerender } = render(
+      <Input label="label" precision={2} />
+    );
+    const input = getByLabelText("label");
+    await userEvent.type(input, "12345.6789");
+    expect(input).toHaveValue("12345.67");
+
+    rerender(<Input label="label" precision={3} />);
+    await userEvent.clear(input);
+    await userEvent.type(input, "9876.54321");
+    expect(input).toHaveValue("9876.543");
+
+    rerender(<Input label="label" precision={2} />);
+    await userEvent.clear(input);
+    await userEvent.type(input, "45");
+    await userEvent.tab();
+    expect(input).toHaveValue("45.00");
+
+    rerender(<Input label="label" precision={0} />);
+    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");
+  });
 });

types/Input.d.ts

@@ -15,6 +15,7 @@ export interface InputProps
   helpText?: string;
   className?: string;
   nakedInput?: boolean;
+  precision?: number;
   contentSize?: number;
   required?: boolean;
   labelProps?: LabelProps;