Input, checkbox, select: Make focus and blur events public

[noahmulfinger]

Description

The internalBlur and internalFocus events are emitted from the input, checkbox, select, etc components. They are technically usable right now, but marked as internal so they are not documented. It would be useful to have those events publicly available for cases like form validation (when validation runs on blur).

Acceptance Criteria

The events are no longer marked as internal and don't have Internal in their names.

Relevant Info

No response

Which Component

calcite-checkbox, calcite-input, calcite-select

Example Use Case

In some of the developer website forms, we listen for blur events on each form input in order to trigger validation.

[driskull]

I don't think we want to expose these internal events but we might want to experiment with delegatesFocus to see if that will trigger the onBlur on the component host.

onFocusOut might work now on the host but might not be the best solution.

[noahmulfinger]

Yeah I guess the main request would be having a way to listen for focus/blur events for calcite-checkbox, calcite-input, and other input-based components so the behavior generally matches native input elements, whether or not it involves the above internal events.

[noahmulfinger]

Just wanted to see if there could be any more movement/discussion on this issue. The focus/blur events are pretty important for form validation and matching native input behavior.

cc @macandcheese

[jcfranco]

Thanks for the ping. According to our roadmap, we'll be looking at consistent focus/blur behavior across components in the upcoming sprints (starting in August). We have an issue to look into delegatesFocus, but none for focus/blur in particular. We could repurpose this one for that subtask. cc @benelan

[benelan]

The form components emit blur and focus events: https://codepen.io/benelan/pen/JjzQMpK

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified with the codepen provided by Ben above in 2.9.0. 🎉