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

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)
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 ?

Uh oh!

Uh oh!

[SelectField] [DropDownMenu] Implement multiple select #1956

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions