What problem does this address?
In the <FormTokenField> component, the return type of displayTransform is expected to be a string. But in fact, we can return a component to display complex suggestions lists like the screenshot below.
When returning a component for displayTransform, we have an issue with the <Token> component:
|
const transformedValue = displayTransform( value ); |
|
const termPositionAndCount = sprintf( |
|
/* translators: 1: term name, 2: term position in a set of terms, 3: total term set count. */ |
|
__( '%1$s (%2$s of %3$s)' ), |
|
transformedValue, |
|
termPosition, |
|
termsCount |
|
); |
The transformed value (which is a component) is printed as a string, resulting in the value of termPositionAndCount becomes [bbject Object] (1 of 1) (see screenshot).
What is your proposed solution?
We should add a new prop suggestionDisplayTransform or listDisplayTransform with the default value to the displayTransform value. The new prop is used for the suggestions list only and the return type can be string or component.
Additional information
This issue is raised when we try to migrate from a custom dropdown component to <FormTokenField> in woocommerce/woocommerce-blocks#3762 and woocommerce/woocommerce-blocks#6647.
What problem does this address?
In the
<FormTokenField>component, the return type ofdisplayTransformis expected to be a string. But in fact, we can return a component to display complex suggestions lists like the screenshot below.When returning a component for
displayTransform, we have an issue with the<Token>component:gutenberg/packages/components/src/form-token-field/token.tsx
Lines 47 to 54 in 59fb859
The transformed value (which is a component) is printed as a string, resulting in the value of
termPositionAndCountbecomes[bbject Object] (1 of 1)(see screenshot).What is your proposed solution?
We should add a new prop
suggestionDisplayTransformorlistDisplayTransformwith the default value to thedisplayTransformvalue. The new prop is used for the suggestions list only and the return type can be string or component.Additional information
This issue is raised when we try to migrate from a custom dropdown component to
<FormTokenField>in woocommerce/woocommerce-blocks#3762 and woocommerce/woocommerce-blocks#6647.