Skip to content

DataForm: add array control #71136

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 18 commits into from
Aug 13, 2025
Merged

DataForm: add array control #71136

Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
645cf41
Add suggestions to to type
elazzabi Aug 8, 2025
42707cd
Add array dataform-controls
elazzabi Aug 8, 2025
d8fabd6
Use array for the Edit prop when type is array
elazzabi Aug 8, 2025
e2f4bc7
Pass array to FORM_CONTROLS
elazzabi Aug 8, 2025
416badc
Add tags to storybook
elazzabi Aug 8, 2025
7094494
Use elements instead of suggestions
elazzabi Aug 8, 2025
1d5ab6a
Return by type instead of checking for elements
elazzabi Aug 8, 2025
f48d7e0
Update defaults to 1) Expand on focus, and 2) validate inputs in arra…
elazzabi Aug 11, 2025
a1f315f
Add a check to keep backward compatibility
elazzabi Aug 11, 2025
6a61e46
Remove the how to by default
elazzabi Aug 11, 2025
3ab76c0
remove extraprops
elazzabi Aug 12, 2025
14a28cd
Update categories for a better example
elazzabi Aug 12, 2025
3b5aca8
Update changelog
elazzabi Aug 12, 2025
20a5622
Move changelog to unreleased
elazzabi Aug 12, 2025
306d98c
Remove validation, show helper text, and only expand on focus when el…
elazzabi Aug 12, 2025
666a2c1
Revert the addition of select to field type
elazzabi Aug 12, 2025
9c8389a
Merge branch 'trunk' into add/array-to-dataform
elazzabi Aug 12, 2025
4be7db6
Apply suggestions from André
elazzabi Aug 13, 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
Update defaults to 1) Expand on focus, and 2) validate inputs in arra… 
…y only
  • Loading branch information
@elazzabi
elazzabi committed Aug 11, 2025
commit f48d7e0785a7e56b4119045360e15580f09ab6b2
18 changes: 5 additions & 13 deletions packages/dataviews/src/dataform-controls/array.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,20 +66,11 @@ export default function ArrayControl< Item >( {
// Custom validation function for FormTokenField
const validateInput = useCallback(
Copy link
Member

@oandregal oandregal Aug 12, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

What if the array doesn't provide any elements? Users still need to be able to add values in that case:

Screen.Recording.2025-08-12.at.08.18.55.mov

We have a story for each field type. In the array story, can we add an example of field array without elements to make sure this case is testable?

Copy link
Member

@oandregal oandregal Aug 12, 2025

Choose a reason for hiding this comment

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

Additionally, if there are no elements provided, we could improve the user experience by:

  • not displaying the suggestion list (__experimentalExpandOnFocus)
  • displaying the how to (__experimentalShowHowTo), so users know how to interact with the component

( token: string ) => {
if ( field.isValid?.custom ) {
const testValue = [ ...arrayValue, token ];
const validationResult = field.isValid.custom(
{
...data,
[ id ]: testValue,
},
field
);
return validationResult === null;
}
return true;
return !! elements?.some( ( element ) => {
return element.label === token;
} );
},
[ field, data, id, arrayValue ]
[ elements ]
);

return (
Expand All @@ -92,6 +83,7 @@ export default function ArrayControl< Item >( {
elements?.map( ( suggestion ) => suggestion.label ) ?? []
}
__experimentalValidateInput={ validateInput }
__experimentalExpandOnFocus
__next40pxDefaultSize
__nextHasNoMarginBottom
{ ...extraProps }
Expand Down
Loading