`GlFilteredSearch` user feedback

Recently, the vue_issues_list feature flag was switched on for the gitlab-org group. This changed the group and project issues lists to use GlFilteredSearch for the filtered search bar. There's been feedback on the behaviour of the filtered search bar, which is listed in this issue (feedback is gathered from slack and gitlab#323743 (closed))

Behaviour feedback

When there are multiple words, clicking on an earlier word creates a big gap

It is expected that there is no big gap

Pressing ctrl+a / cmd+a only selects one word

It is expected that all non-token text is selected rather than just one word

A " at the beginning of the search value should not show any different results than one without

Clicking out of the filter bar tokenizes the search value even if it does not exist

Should clearing the token search value also clear the token?

Clicking the x in ~group x removes the whole label search. I did not like or expect this given there is a separate action button to the far right in the filter bar to clear everything. I would prefer to retain the label = and just remove the ~group when clicking the x.

Should we make the "full text search" bit a token so we have a consistent experience?

Right now, I can type some random text, then a tokenized filter, then go back to the random text which prompts me to add another tokenized filter on anything matching a support tokenized filter. This unintentionally leads to making it really easy to have a garbled search 😄

Potential solutions:

• add a token for Title and Description
• move the full text search into a different input

Styling feedback

Should the full text search term be centered with the token search terms?

This is minor feedback but I noticed the alignment issue and it bothered me so I thought I'd at least like to capture it as a point of discussion 😄

When filtering on type, the first type is the only one that gets the hover state

When hovering over incident or test case, the darker gray background stays on issue.