Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🐛 [BUG]: Checkboxfield changes from uncontrolled to controlled in unit tests #120

Open
brandonlenz opened this issue May 23, 2023 · 0 comments
Labels
bug Something isn't working

Comments

@brandonlenz
Copy link
Contributor

brandonlenz commented May 23, 2023

Current Behavior

First noticed here: #88 (comment)

During unit tests, the following output is shown, and it indicates a problem:

 Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components
          at input
          at div
          at ib (/Users/brandonlenz/dev/ui-modernization-demo/node_modules/@trussworks/react-uswds/lib/index.js:2:214491)
          at div
          at wb (/Users/brandonlenz/dev/ui-modernization-demo/node_modules/@trussworks/react-uswds/lib/index.js:2:225022)
          at name (/Users/brandonlenz/dev/ui-modernization-demo/src/components/form/fields/CheckboxField/CheckboxField.tsx:6:3)
          at form
          at zy (/Users/brandonlenz/dev/ui-modernization-demo/node_modules/@trussworks/react-uswds/lib/index.js:2:250932)
          at Object.<anonymous>.exports.FormProvider (/Users/brandonlenz/dev/ui-modernization-demo/node_modules/react-hook-form/src/useFormContext.tsx:77:5)
          at WrappedInput (/Users/brandonlenz/dev/ui-modernization-demo/src/components/form/fields/CheckboxField/CheckBoxField.test.tsx:30:38)

Expected Behavior

No warning output during unit test

Steps To Reproduce

  1. yarn test
  2. Notice the warning output

Environment

Any/all

Anything else?

https://react.dev/reference/react-dom/components/input#im-getting-an-error-a-component-is-changing-an-uncontrolled-input-to-be-controlled

This often happens when an uncontrolled input starts getting managed by something like a form library (RHF in this case). Can be as simple as not regisering the field initially. Sometimes it is more complicated and might be a bug within the component itself

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant