react-uswds icon indicating copy to clipboard operation
react-uswds copied to clipboard

[fix] the name attribute should be on the <input> not the <select>

Open etanb opened this issue 1 year ago • 0 comments

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:

Screenshot 2024-03-06 at 12 12 48 PM

To Reproduce Steps to reproduce the behavior:

  1. Add a <TimePicker name="test-component" /> within a <form ref={formRef} /> component.
  2. Within your React app, console.log the value of:
const formData = new FormData(formRef.current)
const endTimeValue = formData.get("test-component");

As the input changes.

  1. 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)

etanb avatar Mar 06 '24 20:03 etanb