Skip to content

Expose onBlur on Select (and Dropdown) to improve form library integration #2792

@acd02

Description

@acd02

Description

Summary:

Select currently exposes onValueChange but not onBlur.

Many form libraries (React Hook Form, TanStack Form, etc.) rely on onBlur to mark fields as touched and trigger validation. Without it, we have to attach someConfig.onBlur on a nested subcomponent (Select.Items), which is not ideal.

Current behavior:

// We can only pass onBlur to a sub-element:<Select onValueChange={field.onChange}>
  ...
  <Select.Items onBlur={field.onBlur} />
</Select>

Desired behavior:

// Allow handling both value and blur at the same level:<Select onValueChange={field.onChange} onBlur={field.onBlur}>
  ...
  <Select.Items />
</Select>

Why this matters:

  • Form libs expect onBlur to be available at the component boundary to track touched state and trigger validation.
  • Improves DX by keeping all field wiring in one place.

Problem Statement/Justification

N/A

Proposed Solution or API

N/A

Alternatives

No response

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions