Skip to content

USWDS - date-picker: Resolve chrome non-unique empty id warnings.#4200

Closed
seanpclark wants to merge 1 commit into
uswds:developfrom
seanpclark:date-picker-non-empty-id
Closed

USWDS - date-picker: Resolve chrome non-unique empty id warnings.#4200
seanpclark wants to merge 1 commit into
uswds:developfrom
seanpclark:date-picker-non-empty-id

Conversation

@seanpclark

Copy link
Copy Markdown
Contributor

Description

The date picker component sets an id to "".
Chrome gives a warning as it treats multiple empty ids as non-unique.

Additional information

Visit a following page in Chrome withe more than 1 date picker, and see console warnings (ex. https://designsystem.digital.gov/components/date-range-picker/)

@mejiaj

mejiaj commented May 21, 2021

Copy link
Copy Markdown
Contributor

Thanks for submitting this! We'll take a look as soon as we can.

@mejiaj mejiaj left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Confirming this change removes the empty ID.

But here's some strange thing I noticed. There's an empty name attribute on the newly generated input.
image

<input 
  class="usa-input usa-date-picker__external-input" 
  id="event-date-start" 
  name="" 
  type="text" 
  aria-describedby="event-date-start-label event-date-start-hint"
>

This doesn't seem practical because if we click the label it points to the hidden input, not the enhanced one.

That name value gets intentionally deleted on line:862

externalInputEl.type = "text";
externalInputEl.name = "";

Also, notice how the internalInputEl gets cloned and then it's type gets set to text. The original is text, so this seems unnecessary.

@mejiaj

mejiaj commented Jun 4, 2021

Copy link
Copy Markdown
Contributor

Closing in favor of #4218.

@mejiaj mejiaj closed this Jun 4, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants