typeahead/multiselect component

Enhancement Request

Desired behavior

Projects content-tools need the ability to use the PS DS dropdown component to allow authors to enter tags that belong to a specific project. The author should be able to pick a tag name from the list and see a tag added to the input field as a result of the selection. As the author picks new tags, the new tags should be added to the input field. See example below:

You can see a live example of the desired behavior at the QA page “Ask a question” modal: https://app.pluralsight.com/questions-and-answers

The dropdown used above is a custom package called '@pluralsight/mentors-searchable-dropdown'

The Projects team currently uses a Vue.js module to accomplish such behavior, but we would like to start using the design system dropdown component.

Here is what our current content-tools application looks like:

Today’s behavior

Today’s behavior only allow one text to be shown at a time.

When trying to implement this feature, there should be known that the tags need the ability to be clickable in order to delete tags added. The way that the dropdown is currently designed, any click on it will trigger the action menu to show or hide.

The Value Add

As right now we can already identify two teams that need such functionality, and we believe that other teams would need it as well.

[jaredAnders]

Just came here to request this after seeing your team’s demo today. Can confirm, we built something very similar for the Role IQ Manager experience and used Channels’ implementation as a guideline. I can already think of another place where we’re planning to use this. Would love to see something like this in the design system.

[dborodyansky]

Design proposal for consideration:

https://www.figma.com/file/JImDLmaRbGWo6iWWMN1DL6nB/Select-extras?node-id=0%3A1

<div> Figma</div><div>Figma</div><div>Created with Figma</div>