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:
- Create a Combobox component.
- Pass an onBlur event listener to the Combobox component using onBlurCapture via the inputProps prop.
- Observe the behavior when the user focuses on the select dropdown.
- 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.
ReactUSWDS Version & USWDS Version:
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:
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.