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
Remove validation, show helper text, and only expand on focus when el… 
…ements are present
  • Loading branch information
@elazzabi
elazzabi committed Aug 12, 2025
commit 306d98c2f3587ede58b42634319819123d5f9aed
47 changes: 20 additions & 27 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 @@ -17,7 +17,8 @@ export default function ArrayControl< Item >( {
}: DataFormControlProps< Item > ) {
const { id, label, placeholder, elements } = field;
const value = field.getValue( { item: data } );
const findSuggestionByValue = useCallback(

const findElementByValue = useCallback(
( suggestionValue: string ) => {
return elements?.find(
( suggestion ) => suggestion.value === suggestionValue
Expand All @@ -26,7 +27,7 @@ export default function ArrayControl< Item >( {
[ elements ]
);

const findSuggestionByLabel = useCallback(
const findElementByLabel = useCallback(
( suggestionLabel: string ) => {
return elements?.find(
( suggestion ) => suggestion.label === suggestionLabel
Expand All @@ -39,38 +40,32 @@ export default function ArrayControl< Item >( {
const arrayValue = useMemo(
() =>
Array.isArray( value )
? value
.map( ( v ) => findSuggestionByValue( v )?.label )
.filter(
( item ): item is string => item !== undefined
)
? value.map( ( token ) => {
const tokenLabel = findElementByValue( token )?.label;
return tokenLabel || token;
} )
: [],
[ value, findSuggestionByValue ]
[ value, findElementByValue ]
);

const onChangeControl = useCallback(
( tokens: ( string | { value: string } )[] ) => {
Copy link
Member

@oandregal oandregal Aug 13, 2025

Choose a reason for hiding this comment

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

I'm trying to understand when the returned tokens can be an array of objects instead of strings. Unless I'm missing some context, I can't reproduce; every individual token is always a string. Can you confirm this? If so, can we simplify this to only handle strings?

Copy link
Contributor Author

@elazzabi elazzabi Aug 13, 2025

Choose a reason for hiding this comment

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

That is because the onChange prop from FormTokenField expects that. I haven't been able to reproduce this too, as it's always strings, but changing that will raise a TypeScript error 😞

Copy link
Member

@oandregal oandregal Aug 13, 2025

Choose a reason for hiding this comment

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

Ah, I missed that. It's all good, thanks for the context.

// Convert TokenItem objects to strings
const stringTokens = tokens.map( ( token ) =>
typeof token === 'string'
? findSuggestionByLabel( token )?.value
: token.value
);
onChange( {
[ id ]: stringTokens,
const stringTokens = tokens.map( ( token ) => {
if ( typeof token !== 'string' ) {
return token.value;
}

const tokenByLabel = findElementByLabel( token );

return tokenByLabel?.value || token;
} );
},
[ id, onChange, findSuggestionByLabel ]
);

// Custom validation function for FormTokenField
const validateInput = useCallback(
( token: string ) => {
return !! elements?.some( ( element ) => {
return element.label === token;
onChange( {
[ id ]: stringTokens,
} );
},
[ elements ]
[ id, onChange, findElementByLabel ]
);

return (
Expand All @@ -82,9 +77,7 @@ export default function ArrayControl< Item >( {
suggestions={
elements?.map( ( suggestion ) => suggestion.label ) ?? []
}
__experimentalValidateInput={ validateInput }
__experimentalShowHowTo={ false }
__experimentalExpandOnFocus
__experimentalExpandOnFocus={ elements && elements.length > 0 }
__next40pxDefaultSize
__nextHasNoMarginBottom
/>
Expand Down