[fix] the name attribute should be on the <input> not the <select>
ReactUSWDS Version & USWDS Version:
"@trussworks/react-uswds": "^6.2.0",
"@uswds/uswds": "3.4.1",
Describe the bug
In my example, I'm using the <TimePicker /> component and I need to access its input in an uncontrolled way. The <TimePicker /> component is within a standard <form /> component utilizing a ref={formRef}. I should be able to do the following:
const formData = new FormData(formRef.current)
const endTimeValue = formData.get("end-time");
console.log("endTimeValue = ", endTimeValue);
But the output is 00:00.
However if I console.log the following: formRef.current.elements["end-time"][1].value
it works just fine as it's outputting the value of the <input/> component and not the <select />.
Here's a screenshot of the DOM:
To Reproduce Steps to reproduce the behavior:
- Add a
<TimePicker name="test-component" />within a<form ref={formRef} />component. - Within your React app,
console.logthe value of:
const formData = new FormData(formRef.current)
const endTimeValue = formData.get("test-component");
As the input changes.
- It will always be the same default value regardless if you change input.
Expected behavior
Be able to access FormData properly.
Device and Browser Information (please complete the following information if describing a UI bug):
Mac, Chrome Version 122.0.6261.94 (Official Build) (arm64)