FormTokenField: Automatically add token on blur if there is valid content

[marekhrabe]

Description

This PR adds functionality that adds the current input value as a new token on blur.

FormTokenField was originally build with a feature that retains the input content that user wrote in the input (but doesn't add it as tag). See:

This works great in theory but it turns out that it's super easy to move focus from the token input into the block editor and that will switch the context of the sidebar - making the tag input disappear (and forget the content next time it is opened). This is displayed in #16788

What would be the best solution? I like an explicit confirmation of tags (enter, comma) but losing the content is very easy and maybe something we should try to prevent.

I remember working on this component previously and we've had long discussion about the label "Separate with commas or the Enter key." which leaves one situation open to interpretation: "if I'm only adding a single token, I don't need any separator". Adding the token on blur would solve that problem too.

Fixes #16788

How has this been tested?

Screenshots

Types of changes

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[youknowriad]

I think this was already built into the component but was removed for a11y reasons. cc @afercia

[afercia]

We need to take into considerations all input devices, not just mouse and touch 🙂

For example, when using a keyboard, tabbing away from the input field would create a new tag (if it's new) or add an existing one to the post. This would be totally unexpected for many users.

Yes, it initially worked on blur and was removed a long time ago for these reasons. Also, when using a keyboard, it's very, very, easy to create lots of new tags unintentionally. Just typing something into the field, then change your mind and tab away to continue keyboard navigation and... tada: a new tag is created even if that wasn't the desired action.

The tab key needs to be reserved for its native behavior: keyboard navigation.

Aside: this is one of the reasons why the Classic Editor has a button to create/add tags:

If I remember correctly, at the time the onblur thing was removed I proposed to add a button. If we want to clarify the interaction and avoid users miss to save a tag I can only suggest again to add a button.

[Mamaduka]

@marekhrabe, @afercia, can we close this PR as it can have unexpected results when using keyboard navigation?

[afercia]

@Mamaduka thanks for the ping. Personally, I'd agree to close as pressing the Tab key should be reserved for content navigation and not used for submission.

[Mamaduka]

Thank you, @afercia.