Material-ui: [SelectField] [DropDownMenu] Implement multiple select

[losogudok]

What do you think about multiple select?

[chrismcv]

I think list (and therefore new menus) can do this. SelectField/DropDownMenu don't use the new menu's yet. Is that along the lines of what you were thinking...?

[oliviertassinari]

@chrismcv I think so. I think that we need to updates SelectField and DropDownMenu to use the new Menu component.

[stevehu]

+1. Also allow new entry to be added to support tagging..

[Tux1]

I am trying to implement a kind of menu containing several checkboxes but it doesn't work well at the moment

Le 13 févr. 2016 à 20:29, Mathias Nilsson [email protected] a écrit :

Would love to see this feature.

—
Reply to this email directly or view it on GitHub.

[nathanmarks]

@Va1 Please use the github +1 emojis instead of +1ing

[FranBran]

i would love to see a component like the one from MaterializeCSS:

support for tagging would also be nice to have!

[kkoch986]

i accomplished this using this code https://gist.github.com/kkoch986/34a43b79acd460cae527496a5fa6a982 havent tested it much yet but it seems to work ok. would be interested in what everyone else thinks about it.

[Sharlaan]

I think the multiselect feature discussion can be decoupled into 2 sub-features:

1. the options menu :
   A great implementation would be the Angular-material "Select Header"
   At first glance, best component candidate from MaterialUI would be Autocomplete as it would only need a "multiple" prop which would
   
   
   
   • prevent the underlying popover to close onNewRequest()
   
   
   • transform the value prop into an array
   
   
   • make checkbox appears in MenuItem
   
   
   • Alternative to checkboxes: remove selected option from popover list (like with the React Toolbox component)
   
   
2. display the selections
   This is kinda controversial, i found different views during my searches :
   
   
   
   1. angular-material's select simply concatenates string values directly in the input.
      
      This would be incompatible with typing suggestions in the Autocomplete's input. This would explain why they added another input into the menu.
      
      Then the selections would be either piling down like with angularMaterial component (fixed width), or a single string concatenating values with an ellipsis hiding overflowing text.
      
      I feel this option would not be the nicest as it modifes the overall UI height/width when expanding results
   
   
   2. Many e-commerce sites use autocompletes for filtering, i feel their implementation would be better and more flexible :
      
      Display of selections is externalized into a textarea below the AutoComplete components, the main input would simply have the placeholder text as default.
      
      The selections could then be displayed with chips like with VisualSearch.js
      
      A single selections container, coupled to multiple Autocomplete-multiselect components seems a nice idea.
   
   

What's your thoughts ?

[Sharlaan]

There are 2 proposed implementations you can use:

• mine
• material-ui-chip-input

... but we are kinda waiting for Material-UI v0.16, major rewrites.

[abilashs90]

Any updates on this? This is like the most anticipated feature of MUI!

[Sharlaan]

True, i think also it might be the most WANTED component ! :Q___

Here is my current WIP.

I'm wondering if auto-completing the menu options is pertinent when there are only a few ...
How about including a props.maxItems above which the AutoCompleteTextField would appear ?

[prabhu]

@sharlaan Your code is quite brilliant. Are you planning to create a component project with that?

[Sharlaan]

Here is my repo

[slavab89]

@Sharlaan Amazing!!
I'm going to try to integrate this into my project and see how it goes.

[jagribble]

@Sharlaan really useful!

[DDDDDanica]

@Sharlaan How do you solve the issue of this line :
handleSelection = (name, value) => this.setState({ [name]: value })
It is also listed an example in Material-UI and gave me error of unexpected token =

[Sharlaan]

@ DDDDDanica :
Maybe you forgot to specify a name attribute on your component ?

Also (from memory) i remember getting this false error when using static keyword in class in unconfigured IDE...

Can you tell more about the context of your error ?

[oliviertassinari]

@JessThrysoee did an awesome job extending the multiple property of the <Menu /> up to the <SelectField />. We now have three alternatives to address that multi-select problem:

1. The material-ui-chip-input package that implements something close to what the Material Design specification is suggesting to do.
   
2. The multiple property, we have an example in the documentation for the <SelectField />.
   
3. The material-ui-superselectfield package that kind of mix the two previous approaches.