Skip to content
Merged
Changes from 1 commit
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
000595e
Add support for validating elements
elazzabi Aug 13, 2025
cf015c5
Add validation input and how to
elazzabi Aug 13, 2025
14e0308
Add array validation with required param
elazzabi Aug 15, 2025
59ade44
Update validation logic to check if the token matches any available e…
elazzabi Aug 15, 2025
1db0a20
Enhance validation logic to support array types by ensuring all value…
elazzabi Aug 15, 2025
b7b321a
Add tests for array and text field validations and validating against…
elazzabi Aug 15, 2025
81d355f
Add categories field to DataFormValidationComponent with validation r…
elazzabi Aug 18, 2025
b3b0c28
Add ValidatedFormTokenControl component to enhance array input valida…
elazzabi Aug 22, 2025
382cb4c
Enhance array validation logic to ensure elements are only checked if…
elazzabi Aug 22, 2025
203af53
Refactor array control to support internationalization and improve va…
elazzabi Aug 22, 2025
a65e3b0
Add countries field to DataFormValidationComponent with validation ru…
elazzabi Aug 22, 2025
538fc3a
Merge branch 'trunk' into add/elements-validation
elazzabi Sep 10, 2025
8d5d551
Expose ValidatedFormTokenField from private API
elazzabi Sep 10, 2025
0559f4c
Remove customValidation
elazzabi Sep 10, 2025
b3b0024
Import ValidatedFormTokenField and use it in Array
elazzabi Sep 10, 2025
fc42406
Add displayTransform and __experimentalRenderItem
elazzabi Sep 11, 2025
6d527cd
Replace arrays for display const and remove unused findElementByValue
elazzabi Sep 11, 2025
3f625d8
Adapt suggestions to pass values
elazzabi Sep 11, 2025
53c83fd
Add customValidity and onFocus
elazzabi Sep 11, 2025
822e31c
Add validation with validateTokens
elazzabi Sep 11, 2025
d24449b
Rename function
elazzabi Sep 11, 2025
6617584
Add changelogs
elazzabi Sep 11, 2025
75a0a5f
Change changelog for components
elazzabi Sep 11, 2025
fe03b3d
Call onInputChange after reseting the input
elazzabi Sep 11, 2025
6ef2a57
Pass an onInputChange instead of onFocus
elazzabi Sep 11, 2025
1a94d66
Merge branch 'add/elements-validation' of https://github.com/elazzabi…
elazzabi Sep 11, 2025
f2e301d
Remove validation for elements as it is replaced by control-level val…
elazzabi Sep 11, 2025
27536bc
Add documentation for elements
elazzabi Sep 11, 2025
bc66855
Merge branch 'trunk' into add/elements-validation
elazzabi Sep 18, 2025
300841d
Add changes to use the new getValue/setValue API
elazzabi Sep 18, 2025
08f9b87
Remove validateToken from onChange
elazzabi Sep 18, 2025
a9872b2
Remove customInvalidMessage and messages
elazzabi Sep 18, 2025
32b0d52
Fix linting
elazzabi Sep 18, 2025
5ed466c
Moves changelog entries to Unreleased
elazzabi Sep 18, 2025
20410e4
Remove input logic
oandregal Sep 19, 2025
87c94f6
Update message by including tokens
elazzabi Sep 19, 2025
a4b1a3a
Merge branch 'trunk' into add/elements-validation
elazzabi Sep 23, 2025
ce7465f
Change order of changelog to reflect the timeline
elazzabi Sep 23, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Call onInputChange after reseting the input
  • Loading branch information
elazzabi committed Sep 11, 2025
commit fe03b3d23646ee59854e312b99a449e1cb7067f0
1 change: 1 addition & 0 deletions packages/components/src/form-token-field/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
} else {
// Reset to initial state
setIncompleteTokenValue( '' );
onInputChange( '' );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you clarify what is this for?

I'm not super familiar with the FormToken component, but this is not clearing internal state. It's triggering the onInputChange user callback when the component loses focus under certain conditions. It seems weird.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tried testing the components themselves (both validated and the normal version) but I don't know how to trigger this path. It'd be great if you could share more about this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure!

The FormToken component accepts a onInputChange prop that I think should be called when the input is changed. Here, when the user clicks outside the input, we setIncompleteTokenValue( '' ) but we were not letting the parent component know about the change.

In practice, this is how it looks without onInputChange:

CleanShot.2025-09-18.at.10.42.45.mp4

This is how it looks with it:

CleanShot.2025-09-18.at.10.39.45.mp4

(The error message is cleaned after navigating away)

In summary, we need to inform the parent about the input change to remove the error message.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I continued the conversation here #71194 (comment)

setInputOffsetFromEnd( 0 );
setIsActive( false );

Expand Down