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, Allow FormTokenField suggestions to use keywords #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 Saving tags before post creates unused/unwanted tags #15406. (source) (source)
• Allow separation between item values and displayed UI, support custom JSX (source) (source)
• [FormTokenField] Close the form when the number of tokens reach maxLength #42773
• Better copy/paste support? Allow FormTokenField to be selected and copied #35940
• Better sort order Sort order for FormTokenField #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 Saving tags before post creates unused/unwanted tags #15406.
• Allow objects as values ({ value: id, label: name }). Handy when working with items from DB. Related: FormTokenField: Issues with multiple identical strings #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:

• [FormTokenField] Close the form when the number of tokens reach maxLength #42773
• Add component support for suggestion for FormTokenField #42150
• Allow FormTokenField to be selected and copied #35940
• Sort order for FormTokenField #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.