Skip to content

[fix] Incorrect onBlur Event Handling in Combobox Component #3448

@tyler-maddox-gdit

Description

@tyler-maddox-gdit

ReactUSWDS Version & USWDS Version:

  • "react": "^18.2.0"
  • "react-dom": "^18.2.0"
  • "@trussworks/react-uswds": "^11.0.0"
  • "@uswds/uswds": "3.13.0"
  • "next": "^14.2.35"

Describe the bug

The onBlur event listener can only be passed to the child  element of a Combobox component using the inputProps prop. This makes it impossible to attach an onBlur event listener to the parent select element. As a result, onBlur error messages are triggered erroneously when a user focuses on the dropdown to select a value, as the onBlur event fires prematurely when focus leaves the input.

To Reproduce
Steps to reproduce the behavior:

  1. Create a Combobox component.
  2. Pass an onBlur event listener to the Combobox component using onBlurCapture via the inputProps prop.
  3. Observe the behavior when the user focuses on the select dropdown.
  4. Note that the onBlur event triggers incorrectly before an option is selected.

Expected behavior

When the onBlur event is passed to the Combobox component, it should be correctly attached to the top-level parent of the component. This ensures that onBlur does not trigger prematurely when a user navigates into the dropdown to select a value.

Metadata

Metadata

Assignees

No one assigned

    Labels

    type: bugSomething isn't working like it's supposed to

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions