Tags autocompleter keyboard interaction improvements.

[afercia]

Description

This PR aims to improve keyboard interaction with the tags "autocompleter" (i.e. the flat term selector FormTokenField).

• cycles through the suggestions when using the Down and Up arrow keys
• closes and resets the UI when pressing the Escape key

Also uses @wordpress/keycodes instead of numeric keycodes.

Consistency with similar UIs is improved too, as many other similar tools (mention autocompleter, slash inserter autocompleter, all the various menus) already cycle through the options and close on Escape.

How has this been tested?

npm test

Fixes #8028

[youknowriad]

LGTM code wise. I just wonder if the "reset the text when clicking escape" is not confusing for users (thus the "need design review" label)

[afercia]

@youknowriad yeah I'd also prefer the text entered in the input field to stay there when pressing Escape. Haven't found a way to do that, as seems to me the only way to properly close the suggestions list is to reset the state to its initial values: this.setState( initialState );. Any suggestions on an easy way to keep the text are very welcome.

[youknowriad]

@afercia Just a guess:

• Try to set isExpanded (state) to false while keeping incompleteTokenValue as is.
• the isExpanded should be set to true again when you start typing again (not sure if it's already the case)

[afercia]

@youknowriad I did try that, nope. Actually isExpanded is used only for the aria attributes. The suggestions list opens based on showSuggestions = inputHasMinimumChars && !! matchingSuggestions.length.

[afercia]

Rebased. With some refactoring, I've found a way to keep the typed text after pressing Escape. If this approach is not desirable, I can revert the latest commit and let the entered text go away. No strong opinions about the best behavior.

Either ways, I'd like to make one more round to let the suggestions list close when tabbing away from the field. Currently, it stays open. It should close.

@youknowriad when you have a chance I'd greatly appreciate your eyes here, especially for the tests part. I had no idea how to fix them other than what I've done.

[youknowriad]

If I'm reading this properly, it looks like this.state.showSuggestions is just a duplicate of this.state.isExpanded and we could remove the first one and replace it by the second one in the render functions. Am I missing something?

[afercia]

Yes it is possible I've missed the duplication, will double check thanks!

[afercia]

Worth noting that everytime I had to change the tests for this component, then I got an error "cannot find ... ./lib/fixtures.js which is unrelated to the changes made here. I guess it's a matter of configuration as seems to me the test directory of this component is the only one that has a sub-directory lib.

[afercia]

Rebased. Dropped showSuggestions in favor of isExpanded.

Re: closing the suggestions list when tabbing away from the field (or clicking outside), I'm having a second thought. In a way, it may make sense to keep it as is and show the matching suggestions when there's a valid value in the field. We can always revisit later if the preferred behavior is to always close.

[youknowriad]

Looks good to me code wise.

[aduth]

Can you explain the use of stopPropagation here? Ideally omitting any mention of the word "autocompleter", as this is intended to be a general-use component unaware of any such context usage.

I'm not suggesting it's not needed, but I've become very wary of their use, as they have the tendency to be used as an extreme solution which are never obvious to evaluate as being necessary to the future maintainer. I might propose we go so far as to introduce an ESLint rule which we'd knowingly anticipate to be disabled in specific circumstances, but more as a general deterrent (also encouraging comments to explain the disabling).