Visitar URL original
fix: prevent console error when using datalist with text inputs by vijaygovindaraja · Pull Request #6594 · uswds/uswds · GitHub
Skip to content

fix: prevent console error when using datalist with text inputs - #6594

Merged
ethangardner merged 6 commits into
uswds:developfrom
vijaygovindaraja:fix/6567-datalist-console-error
Apr 22, 2026
Merged

fix: prevent console error when using datalist with text inputs#6594
ethangardner merged 6 commits into
uswds:developfrom
vijaygovindaraja:fix/6567-datalist-console-error

Conversation

@vijaygovindaraja

@vijaygovindaraja vijaygovindaraja commented Mar 27, 2026

Copy link
Copy Markdown
Contributor

Summary

Fixes console error when native HTML <datalist> elements are used with USWDS text inputs.

Changes

1. validate-input.js — null check ordering bug

The validatorCheckbox element was used (line 30) before being checked for null (line 32):

// Before — crashes if validatorCheckbox is null
const checked = validatorPattern.test(el.value);
validatorCheckbox.classList.toggle(CHECKED_CLASS, checked); // TypeError!
if (!validatorCheckbox) { throw ... }

// After — check existence first
if (!validatorCheckbox) { throw ... }
const checked = validatorPattern.test(el.value);
validatorCheckbox.classList.toggle(CHECKED_CLASS, checked);

2. behavior.js — guard against missing closest() in event delegation

Added a check that event.target supports the closest() method before calling it. Some elements (datalist options, certain SVG elements) may not support closest() in all browsers, causing a TypeError during event bubbling.

// Before
const target = event.target && event.target.closest(selector);

// After
const target =
  event.target &&
  typeof event.target.closest === "function" &&
  event.target.closest(selector);

Test plan

  • Add a <datalist> to a usa-input text field
  • Click the input and select a datalist option
  • Verify no console errors appear
  • Verify validation components still work correctly (with data-validation-element)
  • Verify character count components still work correctly
  • Run existing test suite

Fixes #6567

@annepetersen annepetersen added Needs: Confirmation Reported behavior needs validation. Remove after recording reproduction or investigation results. Package: Text input Work affecting Text input. Apply only when this area helps route or find the issue. Help wanted Community contributions are welcome; scope and acceptance criteria should be clear before applying. labels Mar 27, 2026
@vijaygovindaraja vijaygovindaraja mentioned this pull request Mar 28, 2026
Closed
2 tasks done
@vijaygovindaraja
vijaygovindaraja force-pushed the fix/6567-datalist-console-error branch from 400e291 to 6b41bcf Compare March 29, 2026 15:43
@vijaygovindaraja

vijaygovindaraja commented Mar 29, 2026

Copy link
Copy Markdown
Contributor Author

updated based on @daresTheDevil's analysis in #6567.

the root cause was in keymap.js — when you pick a datalist option, Chrome fires an InputEvent, not a KeyboardEvent. the keymap handler was calling getModifierState() and accessing event.key on it, which blows up because InputEvent doesn't have those.

changes in this update:

  • added: keymap.js guard — early return when the event isn't a KeyboardEvent (checks for event.key and getModifierState before proceeding)
  • removed: behavior.js closest() guard — daresTheDevil confirmed event.target is always the , not a datalist , so closest() is always available. that guard was unnecessary.
  • kept: validate-input.js null check fix — separate bug but worth fixing (validatorCheckbox used before null check)

@daresTheDevil appreciate the thorough testing and comparison — that event logging approach nailed it. the InputEvent vs KeyboardEvent distinction was the key insight.

@vijaygovindaraja
fix: prevent console error when using datalist with text inputs
432b2aa 
Fix two issues that cause errors when native HTML datalist elements are
used with USWDS text inputs:

1. keymap.js: Guard against non-KeyboardEvent events. When a user
   selects a datalist option, the browser fires an InputEvent (not a
   KeyboardEvent). The keymap handler called getModifierState() and
   accessed event.key on the InputEvent, causing a TypeError. Add an
   early return when the event lacks these KeyboardEvent properties.

2. validate-input.js: Move the null check for validatorCheckbox before
   its first use. Previously, classList.toggle() was called on line 30
   before the existence check on line 32, causing a TypeError when the
   validator checkbox element was not found in the DOM.

Fixes uswds#6567

Signed-off-by: Vijay Govindarajan <vijay.govindarajan91@gmail.com>
Signed-off-by: V Govindarajan <vijay.govindarajan91@gmail.com>
@vijaygovindaraja
vijaygovindaraja force-pushed the fix/6567-datalist-console-error branch from 6b41bcf to 432b2aa Compare March 29, 2026 15:48
ethangardner
ethangardner suggested changes Apr 21, 2026
View reviewed changes

@ethangardner ethangardner 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.

Thank you so much for this contribution! I appreciated your notes about the diagnosis and how to reproduce the issue, as well as the comments you added to the file. I have one small change request, but this looks good otherwise.

Comment thread packages/uswds-core/src/js/utils/keymap.js
@ethangardner ethangardner removed the Needs: Confirmation Reported behavior needs validation. Remove after recording reproduction or investigation results. label Apr 21, 2026
@ethangardner

ethangardner commented Apr 21, 2026

Copy link
Copy Markdown
Contributor

I was able to confirm the behavior and validate the fix. There is one small change in review.

@vijaygovindaraja
fix: add instanceof KeyboardEvent check to keymap guard
e25d7ae 
Signed-off-by: V Govindarajan <vijay.govindarajan91@gmail.com>
@vijaygovindaraja

vijaygovindaraja commented Apr 21, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

@ethangardner done, added the instanceof check.

ethangardner
ethangardner approved these changes Apr 22, 2026
View reviewed changes

@ethangardner ethangardner 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.

Thank you!

@ethangardner
ethangardner merged commit 3da8574 into uswds:develop Apr 22, 2026
5 checks passed
@coderabbitai coderabbitai Bot mentioned this pull request Jul 16, 2026
Merged
1 task done
@ethangardner ethangardner added this to the uswds 3.14.0 - Aug 2026 milestone Aug 4, 2026
@annepetersen annepetersen added ❤️ Thanks Historical appreciation marker. Prefer a reaction; not required for triage. and removed Help wanted Community contributions are welcome; scope and acceptance criteria should be clear before applying. labels Aug 5, 2026
This was referenced Aug 11, 2026
Closed
Merged
@chandracarney chandracarney moved this from Fed Final Review to Done in USWDS Core Project Data Aug 21, 2026
@github-project-automation github-project-automation Bot moved this from Triage to Fed Final Review in USWDS Core Project Data Aug 21, 2026
@ryparker ryparker mentioned this pull request Sep 14, 2026
Closed
2 tasks done
@mdmower-csnw mdmower-csnw mentioned this pull request Sep 15, 2026
Merged
26 of 27 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer
@ethangardner ethangardner ethangardner approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

@ethangardner ethangardner

Labels

Package: Text input Work affecting Text input. Apply only when this area helps route or find the issue. ❤️ Thanks Historical appreciation marker. Prefer a reaction; not required for triage.

Projects

No open projects
USWDS Core Project Data
Status: Done

Milestone

uswds 3.14.0 - Aug 2026

Development

Successfully merging this pull request may close these issues.

USWDS - Bug: Console error when using list and <datalist> on text inputs

4 participants

@vijaygovindaraja @ethangardner @annepetersen @chandracarney