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] DatePicker error handling not up to current USWDS spec #2263

Closed
jlee-enquizit opened this issue Feb 24, 2023 · 1 comment · Fixed by #2398
Closed

[fix] DatePicker error handling not up to current USWDS spec #2263

jlee-enquizit opened this issue Feb 24, 2023 · 1 comment · Fixed by #2398
Assignees
Labels
type: bug Something isn't working like it's supposed to

Comments

@jlee-enquizit
Copy link

ReactUSWDS Version & USWDS Version:
react-uswds: v4.1.0
uswds: v3.1.0

Describe the bug
There is a tooltip error that pops up on DatePicker component when there is a wrong input.
This is not compliant to the USWDS current style that highlights the whole component and displays an error message above the input. This should be the same error-handling for the phone number and zipcode inputs as well.

To Reproduce
Steps to reproduce the behavior:

  1. Go to a DatePicker field
  2. Type in text, anything that is not a proper date.
  3. Submit or hit Enter.
  4. See error

Expected behavior
The label and input should be highlighted in red with a red error message displayed above input.

Screenshots
Current:
image
USWDS compliant: (phone number used as example)
image

Additional context

Device and Browser Information (please complete the following information if describing a UI bug):

  • Mac Ventura 13.2.1 (22D68)
  • Chrome
  • Version 110.0.5481.100
@jlee-enquizit jlee-enquizit added the type: bug Something isn't working like it's supposed to label Feb 24, 2023
@werdnanoslen werdnanoslen self-assigned this May 11, 2023
@werdnanoslen
Copy link
Contributor

Hi, I've submitted #2398 to add validation controls that other inputs have, like for phone numbers. To use it, you'd need to set the fields' error and validationStatus attributes and give it an ErrorMessage component, as described in our FormGroup story.

As a side note, I (and USWDS) recommend using the date input, not date picker, component for memorable dates like DOB.

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

Successfully merging a pull request may close this issue.

2 participants