Picklist input for tags and multiselect

[distantnative]

This PR …

Please have a first look at the UX and let's collect bugs, missing features...

TODO

• search.display option still not supported (from v3, has been not supported in v4.beta2 either)
• Styling update @bastianallgeier
• Consider removing min-width from pick list dropdown to fix [v4] multiselect field overflow issue on mobile #5629 at least as good as possible

Fixes

• [v4] Multiselect field: don't hide selected values, but highlight them #5744
• [v4] Tags field: cannot navigate with arrow keys left and right in selector filter input #5741
• [v4] Multiselect field should indicate that the user can scroll #5627

[bastianallgeier]

The more I look at this, the more I come to the conclusion, that the tags field should also have the full list with checkboxes. It is so much more usable to see all options and select those that you want. I don't think the UX should or needs to be different for tags here. I know that there's hardly any differentiation between fields, but it really is the same pattern. You select multiple items from a list. I guess we really need to push the tags field more into a real taxonomy direction with unique ids for tags, translatable tags, etc. That would be the real differentiator in the future. But in terms of UX, I don't think that they should be so different.

[distantnative]

I really like the styling tweaks you did.

I would argue that the current state is much more what people expect from the tags field based on v3. I get your suggestions and in that case a different UI with checkboxes would make sense, but just changing the UI right now would be not so great I think. To me, there is quite a bit of value in having a distinction of these two fields. Making them too similar, without the added functionality, just creates confusion why they are so similar and yet different fields.

[bastianallgeier]

Changes

• New tag creation button is now directly in the filter input to build a clearer connection between the two
  
• The show more button scrolls with the other options now which feels more natural. Once you reach the bottom of the list you can use it to the extend the list. The styling has been improved with an icon
  
• The multiselect input has an invisible button which can be focused and will open the dropdown properly. This improves keyboard navigation.
• The dropdown in the tags field hides the inputs in a way that keyboard accessibility is maintained
• The search input uses "Enter" as placeholder when there are no options and "Filter" as soon as there are options.
• The picklist-input component only introduces styles that are globally useful. Other styles moved to the picklist-dropdown or the tag and multiselect inputs.
• The checkboxes have a fixed disabled state design in the dropdowns
• The search input has a proper outline when focused
• The dropdown has a narrower min width for small screens.