React-md: Implement Multi-Select Fields

[mlaursen]

I think that the SelectField component should be multi-selectable just like the normal select field. Unfortunately the material design docs do not have anything about this currently.

I think this can be implemented in two ways:

Only Update Behavior

Basically update the selection function so that if the user presses ctrl (windows/linux) or CDM (mac) and clicks the items, multiple can be selected. When a keyboard user holds shift and uses the up or down arrows, multiple can be selected (kind of like native select functionality).

The problem with this solution is that the user would have to click away from the select field to confirm their selections.. If they only click one, it would untoggle all the others and only have one selection. Also this limits the selectablity for keyboard only users, since they might want to select some in a row, and then skip a few and continue selecting.

Change to ListItemControl component

Another solution is when the multiple prop is set, the menu items are rendered with a Checkbox in the ListItemControl component instead of the ListItem. This would just require different keyboard-focus-events for keyboard users so that the checkboxes are selected instead of the ListItem.

The problem for this solution is that the SelectionControl and ListItemControl components would always be included in the bundle unless I made a completely separate MultiSelectField component. _Almost_ all of the logic is shared, so I don't really want to separate it.

I am leaning a bit more towards the second option.

[mlaursen]

Nevermind. It is a lot more accessible to use Checkboxes instead of a multi-select field.

http://webaim.org/techniques/forms/controls#select

[marciovsena]

https://react-md.mlaursen.com/components/chips