Editing one policy parameter affects other displayed parameters

src/__tests__/InputField.test.js

@@ -1,10 +1,19 @@
 import { render, screen, fireEvent } from "@testing-library/react";
 import InputField from "../controls/InputField";
+import { useSearchParams } from "react-router-dom";
 
 const testProps = {
   placeholder: "Test Placeholder",
   onChange: jest.fn(),
 };
+jest.mock("react-router-dom", () => {
+  const originalModule = jest.requireActual("react-router-dom");
+  return {
+    __esModule: true,
+    ...originalModule,
+    useSearchParams: jest.fn(),
+  };
+});
 const patternProp = { pattern: "%" };
 const testInput = "Test Input";
 
@@ -18,22 +27,32 @@ const setup = (props) => {
   };
 };
 
-test("Should handle non-percent input & submit on blur", () => {
-  const { input } = setup(testProps);
-  fireEvent.change(input, { target: { value: testInput } });
-  expect(input.value).toBe(testInput);
-  expect(testProps.onChange).not.toHaveBeenCalled();
+describe("Should take inputs", () => {
+  test("Should handle non-percent input & submit on blur", () => {
+    useSearchParams.mockImplementation(() => {
+      const get = () => "gov.irs.ald.loss.capital.max.HEAD_OF_HOUSEHOLD";
+      return [{ get }];
+    });
+    const { input } = setup(testProps);
+    fireEvent.change(input, { target: { value: testInput } });
+    expect(input.value).toBe(testInput);
+    expect(testProps.onChange).not.toHaveBeenCalled();
 
-  fireEvent.blur(input);
-  expect(testProps.onChange).toHaveBeenCalledWith(testInput);
-});
+    fireEvent.blur(input);
+    expect(testProps.onChange).toHaveBeenCalledWith(testInput);
+  });
 
-test("Should append '%' for percent pattern & submit on blur", () => {
-  const { input } = setup({ ...testProps, ...patternProp });
-  fireEvent.change(input, { target: { value: testInput } });
-  expect(input.value).toBe(testInput + "%");
-  expect(testProps.onChange).not.toHaveBeenCalled();
+  test("Should append '%' for percent pattern & submit on blur", () => {
+    useSearchParams.mockImplementation(() => {
+      const get = () => "gov.irs.ald.loss.capital.max.HEAD_OF_HOUSEHOLD";
+      return [{ get }];
+    });
+    const { input } = setup({ ...testProps, ...patternProp });
+    fireEvent.change(input, { target: { value: testInput } });
+    expect(input.value).toBe(testInput + "%");
+    expect(testProps.onChange).not.toHaveBeenCalled();
 
-  fireEvent.blur(input);
-  expect(testProps.onChange).toHaveBeenCalledWith(testInput + "%");
+    fireEvent.blur(input);
+    expect(testProps.onChange).toHaveBeenCalledWith(testInput + "%");
+  });
 });

src/controls/InputField.jsx

@@ -1,7 +1,8 @@
 import { motion } from "framer-motion";
 import useMobile from "../layout/Responsive";
 import style from "../style";
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { useSearchParams } from "react-router-dom";
 
 export default function InputField(props) {
   const {
@@ -14,7 +15,11 @@ export default function InputField(props) {
     value,
     placeholder,
   } = props;
+  //Saving placeholder as a state variable so it doesn't change if user types a value and deletes it
+  const [savedPlaceholder, setPlaceholder] = useState(placeholder);
   const [inputValue, setInputValue] = useState(value ? value : "");
+  const [searchParams] = useSearchParams();
+  const focus = searchParams.get("focus") || "";
   const mobile = useMobile();
   const re = /^[0-9\b]*[.]?[0-9\b]*?$/;
   const onInput = (e) => {
@@ -23,6 +28,13 @@ export default function InputField(props) {
       onChange(value);
     }
   };
+  //clears input field and resets placeholder if focus changes for use case of editing policy parameter
+  useEffect(() => {
+    if (!value) {
+      setInputValue("");
+      setPlaceholder(props.placeholder);
+    }
+  }, [focus]);
   return (
     <motion.input
       // On iOS, should show a keyboard with a blue "Go" button
@@ -76,7 +88,7 @@ export default function InputField(props) {
         setInputValue(e.target.value);
       }}
       value={inputValue}
-      placeholder={placeholder}
+      placeholder={savedPlaceholder}
     />
   );
 }