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

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

Open
etanb opened this issue Mar 6, 2024 · 0 comments
Open

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

etanb opened this issue Mar 6, 2024 · 0 comments
Labels
type: bug Something isn't working like it's supposed to

Comments

@etanb
Copy link

etanb commented Mar 6, 2024

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 etanb added the type: bug Something isn't working like it's supposed to label Mar 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: bug Something isn't working like it's supposed to
Projects
None yet
Development

No branches or pull requests

1 participant