feat(ui): dispatch validation events from TextField #609
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a new a2ui-validation-input event dispatched from the TextField component to communicate validation state changes. The changes look good and achieve the goal. I've added a couple of minor suggestions to improve code style and robustness.
ditman
left a comment
ditman
left a comment
There was a problem hiding this comment.
Comment about having a specific, shared type for the failed/passed validation event in web_core!
| return; | ||
| } | ||
|
|
||
| this.dispatchEvent( |
There was a problem hiding this comment.
The indentation of this block seems wrong.
| } | ||
|
|
||
| this.dispatchEvent( | ||
| new CustomEvent("a2ui-validation-input", { |
There was a problem hiding this comment.
Can this be an A2UIValidationEvent extends CustomEvent, with a specific signature for the detail property, so it can be accessed safely later?
There's an example of an extension of CustomEvent here. In this case, I think the event should be in web_core, so it can be shared with other renderers; or is this a Lit-only functionality?
|
|
||
| // Debug Validation Events | ||
| #handleValidationInput = (e: Event) => { | ||
| const detail = (e as CustomEvent).detail; |
There was a problem hiding this comment.
(This is where having a custom event type would help to access detail in a type-safe way)
2 participants
This PR introduces the a2ui-validation-input event to the
TextField
component to bubble validation state changes.
Changes
TextField (
text-field.ts
):
Added dispatch of a2ui-validation-input on every input event.
Payload: { componentId, value, valid: boolean }.
Reason: Native invalid events do not cross the Shadow DOM boundary. This custom event allows parent components (like the Shell) to observe real-time validation status.
Component Gallery (
component-gallery.ts
):
Added a listener for a2ui-validation-input at the document root.
Logs validation events to both the Console and the internal Debug Panel for visual verification.
Verification
Verified manually in the Component Gallery:
Typing in "TextField (Regex)" now triggers logs in the Debug Panel.
Valid/Invalid states strictly match the regex rules.
Pre-launch Checklist
If you need help, consider asking for advice on the discussion board.