Editing one policy parameter affects other displayed parameters

[patrickhanl]

Fix 695

Update input field to use useEffect to clear the input field when focus changes & keep placeholder in state so that it does not change when user deletes their entry.

input-policy-parameters.mp4

🤖 Generated by Copilot at 1e5792e

Summary

🧪🔎🔄

This pull request improves the user experience and testing of the InputField component, which allows users to edit policy parameters. It uses the useSearchParams hook to control the focus and clear the input based on the URL query, and updates the tests to mock this hook. It also adds a useEffect hook to handle focus changes.

useSearchParams to control the field of doom
Clear the input and reset the placeholder of gloom
Run a side effect when the focus shifts
InputField tests mock the hook that lifts

Walkthrough

• Add useSearchParams hook to InputField component and test file (link, link)
• Mock useSearchParams hook in InputField test file and simulate different query parameters (link, link)
• Wrap existing tests in InputField test file in a describe block with a clear label (link)
• Add savedPlaceholder state variable to InputField component to store the initial placeholder prop (link)
• Add useEffect hook to InputField component to clear the input field and reset the placeholder when the focus changes (link)
• Replace placeholder prop with savedPlaceholder state variable in input element of InputField component (link)

[nikhilwoodruff]

This looks good to me and works locally too. Thanks @patrickhanl!