`FormTokenField` v2: gather initial feedback

[ciampo]

Context

As we're slowly starting to roll out new versions of existing components, we want to start gathering feedback on what changes, improvements, and new features we'd like to see applied to such components.

While we initially focused on Tooltip (shipped), Tabs (almost ready), and DropdownMenu (still WIP), we think that the next batch of components that we'll focus on is going to be CustomSelectControl, ComboboxControl and FormTokenField.

We see these three components as related:

• CustomSelectControl is the first component in the group that we'll focus on, since it is the simplest of the three;
• ComoboxControl will come after, since it kind of builds on CustomSelectControl and adds a text input to search through the options;
• FormTokenField will be the last component of the group, as it's the most complex, and kinda builds on top of ComboboxControl, adding the token "chips".

[!NOTE]
Given how closely related to each other these components are, I believe that we should consider designing those three components together.

[!TIP] Also, please note that at this point in time, we can't offer estimates of when we'd be able to start working on those components, as we're still going through a learning phase with the DropdownMenu rewrite.

Feedback

I will update this section as we gather feedback.

• Make the token component support non-text elements, like images (source)
• Make the token component support non-text elements, like images (source)
  • Either via slot + subcomponents, or via a function/render prop? Same as CustomSelectControl V2 with renderSelectedValue
• Support error and loading states (source)
• Make tokens optionally dismissible (source)
• Make it possible to search by label, id, slug, SKU, author, and other meta-data (source, #33334)
• Display secondary meta-data when two tokens with the same label are added, e.g., ID or Slug (source)
• Ability to display explicit action for creating items, currently triggered by comma or Enter key. Potentially, it could help us resolve #15406. (source) (source)
• Allow separation between item values and displayed UI, support custom JSX (source) (source)
• https://github.com/WordPress/gutenberg/issues/42773
• Better copy/paste support? https://github.com/WordPress/gutenberg/issues/35940
• Better sort order https://github.com/WordPress/gutenberg/issues/22048
  • Related to "Display handles and make it possible to reorder tokens by drag & drop" (source)

cc @WordPress/gutenberg-components @WordPress/gutenberg-design

[ciampo]

Copying some feedback shared by @jarekmorawski

Design-wise, I'd prefer to stick to the form token field because it's a widely used pattern that most users are accustomed to. It supports multi-select and search. There are ways we'd make it smarter for everyone's benefit:

• Make the token component support non-text elements, like images
• Display handles and make it possible to reorder tokens by drag & drop
• Support error and loading states
• Make tokens optionally dismissible
• Make it possible to search by label, id, slug, SKU, author, and other meta-data
• Display secondary meta-data when two tokens with the same label are added, e.g., ID or Slug

[Mamaduka]

Some items from my wishlist are based on my work on the FlatTermSelector component.

• Ability to display explicit action for creating items, currently triggered by comma or Enter key. Potentially, it could help us resolve #15406.
• Allow objects as values ({ value: id, label: name }). Handy when working with items from DB. Related: #62533.

[ciampo]

@Mamaduka

Ability to display explicit action for creating items, currently triggered by comma or Enter key.

Interesting point — it would be great if you could gather examples of this pattern in existing UI libraries or products across the web.

Allow objects as values

Since the new version of the component will likely be a compound component (ie. exposing sub components like, ie., FormTokenField.Item), we will likely move away from passing an array of strings anyway. The new components will definitely allow showing a label that is different from the underlying ID, and consumers of the component will be able to decide the value passed to each Item subcomponent

[ciampo]

@diegohaz , do you have suggestions on how would ariakit support a use case similar to this component, likely building on top of Combobox?

[diegohaz]

@diegohaz , do you have suggestions on how would ariakit support a use case similar to this component, likely building on top of Combobox?

There's an experimental Tag module that can be combined with Combobox: https://ariakit.org/examples/tag-combobox

Is that what you mean?

[Mamaduka]

@ciampo, while not exactly the same, the editor already has a similar example in the Link Control component. See the screenshot.

@diegohaz, I was (and am) really excited when you showcased Tags + Combobox on Twitter.

Screenshot

[jameskoster]

Tag + Combobox looks fantastic.

Display handles and make it possible to reorder tokens by drag & drop

I'm still not sure about this. Seems like it would add a lot of complexity? How would you re-order as a keyboard user?

[tyxla]

A few additional issues that have come up historically and could be of interest for the round of feedback:

• 42773

• 42150

• 35940

• 22048

[jarekmorawski]

How would you re-order as a keyboard user?

One solution would be to let users use the arrow keys while holding Shift. Or, we could let users press Enter or Space when a token is active to enter a 'grabbed' state (more info).

Alternatively, if we aimed to follow accessibility guidelines to a dot, we'd add a Reorder button that lets users rearrange items using the keyboard when activated. We'd only display the handles when the reordering mode is active.