[SelectField] Include option to select multiple values.

[spiermar]

Adding support for multi-select with no changes to the default component behavior and minimal changes to the original components. Might benefit from more testing in conjunction with other component options. Ideally this should have "text-overflow" set to "ellipsis" in the input when the concatenated string is larger than the field, but I couldn't find a clean way of doing this. Non-multiple selects suffer form the same problem if the label is large, so the behavior is consistent with current behavior. This suffices my needs, but I'm happy to make changes if necessary. This closes #1956.

• PR has tests / docs demo, and is linted.
• Commit and PR titles begin with [ComponentName], and are in imperative form: "[Component] Fix leaky abstraction".
• Description explains the issue / use-case resolved, and auto-closes the related issue(s) (http://tr.im/vFqem).

[ericlau-solid]

I definitely +1 this. Ability to select multiple values is crucial to a project I need to work on soon, so this is much appreciated.

[spiermar]

I'll have a look into those linting warnings.

[mbrookes]

Is this prop useful outside of SelectField, or can it be @ignored for the public DropDownMenu API docs?

[spiermar]

I can't think of a use case for multiple items in a "regular" drop down menu, but I might be wrong. If that's the case @ignore should works.

[mbrookes]

@spiermar Thanks for the excellent contribution. 👍

Since the multi-select menu doesn't close when selecting an item, should we have a keyboard key for that? Esc seems natural a natural choice.

[spiermar]

Thanks @mbrookes. It makes sense. Currently, it's a matter of clicking outside of the drop down, but adding Esc definitely improves the user experience from my point of view.

[nathanmarks]

@spiermar

The UX here is a bit clunky, particularly for deselecting items. Imagine you have a dropdown of 100+ countries and you're having to go through the entire menu to find options to deselect -- it's a rather cumbersome experience. Multi-selects aren't generally built this way (refer to the native multi select or those found in libraries such as chosen).

All of Google's multi-selects with material design involve chips and most JS enhanced multi-selects that still have a dropdown menu use some sort of chip to represent the selected elements. This would be a much more appropriate implementation and certainly truer to the material design spec:

I urge you to check out the multi-select examples here, they represent what I'm suggesting pretty well: https://harvesthq.github.io/chosen/

What do you think to implementing this as a MultiSelect?

[nathanmarks]

@spiermar I'm going to close this PR in favour of the implementation I suggested above -- would you like to tackle it?

Also, feel free to discuss if you vehemently disagree with my conclusion 😄

[ericlau-solid]

Nathanmarks, are you going to implement the suggestion, or you are asking @spiermar to do so? I am eagerly anticipating this feature so I want to be aware and not have the feature abandoned.

[nathanmarks]

@ericlau-solid I'm asking @spiermar to do so -- hopefully he is open to the suggestion.

[spiermar]

I agree that for large lists the implementation is not ideal. Having an input field with with autosuggest and multiple chips is definitely a more user friendly solution for those use cases.
Having said that, the PR implementation, although not ideal for all use cases, solved my current problem. I would love to work in the proposed solution, but right now, I don't have the bandwidth to do so.
I can probably tackle it, but since I can't compromise with a date right now, I would hate to block someone else that might be interested in doing it too.

[halayli]

@nathanmarks The chip multiselect is great but not all multiselect cases have hundreds of entries in them and sometimes you have limited space where a multiselect dropdown would be ideal. It's still very useful when you have a small list. The PR doesn't look intrusive and many can benefit from it.

[abilashs90]

Any update on this??

[kjg531]

Any updates?

[MikeMuxika]

@kjg531 It looks like someone just needs to create a new PR with the recommended changes. I'm not sure if I'll have time today to do this but if you wanna do that, I'm sure they could get the ball rolling on merging it. :)

[Enverbalalic]

Will someone be so kind to get the ball rolling on this so that this can maybe get implemented in 0.15.4 ?

[halayli]

@oliviertassinari any thoughts on this? IMO, multiselect and chip selects are not mutually exclusive.

[oliviertassinari]

multiselect and chip selects are not mutually exclusive

@halayli I couldn't find any reference to a multi-select in the Material Specification.
I feel like the Chip / AutoComplete is the UX way Google is advising to take.

Still, users should be able to build one if they want using Composition.
E.g. something close to Angular Material:

[halayli]

Fair enough.