Use react-select for react-based dropdowns (SingleSelectField and MultiSelectField)

[chillu]

Acceptance Criteria

• I can select a single item in a dropdown
• I can select a multiple items in a dropdown
• I can clear selection for single selects
• I can remove single items for multi selects
• The field efficiently displays long tiles as selected items
• The field can present validation errors
• The field has a useful readonly/disabled presentation
• The styling looks largely consistent between Entwine and React UIs
• The styling looks largely consistent with the existing <TreeDropdownField> react component
• Replace checkboxsetfield with listbox in asset-admin permission selection (see https://github.com/silverstripe/silverstripe-framework/issues/6063)

Notes

• This will eventually replace our use of ChosenJS as we phase out Entwine-based views
• We're already using react-select for the new react-based TreeDropdownField
• Consider combining the UI logic with TreeDropdownField (might not make sense, but please think about it)

Excluded

• I can lazy load large data sets via XHR

Related

• TreeDropdownField - React Search Feature
• Implement a TreeMultiSelectField in React
• Convert Entwine/Chosen dropdowns to a Bootstrap React component
• Use React-based TreeDropdownField in non-React sections

[chillu]

Overview of current state:

Field	Context	Library	CSS	Comment
DropdownField	Entwine	ChosenJS	Custom	Supports search as standard ChosenJS feature
DropdownField	React	Native	Bootstrap	Converted to a bootstrap-styled dropdown as <SingleSelectField> (without search). To be converted to react-select
ListboxField	Entwine	ChosenJS	Custom	Multi select
ListboxField	React	n/a	n/a	Not converted yet (should be <MultiSelectField>)
TreeDropdownField	Entwine	JSTree	Custom
TreeDropdownField	React	react-select	react-select with custom
TreeMultiSelectField	Entwine	JSTree	Custom
TreeMultiSelectField	React	react-select	n/a	Implemented through (https://github.com/silverstripe/silverstripe-admin/issues/53)

Updated 17/08/2017

[chillu]

For the moment, this only affects custom dropdowns in the assets and campaigns section, as well as lesser used core dropdowns in the "asset search" advanced form. Those look OK in their default bootstrap styling already. The UX will be slightly different to ChosenJS dropdowns in Entwine UIs (no search abilities in dropdown options), but I doubt many users will notice. Removing from the 4.0 milestone for now.

[tractorcow]

Note: We'll need to support tagfield in react. I'd prefer to see something in this story used to support that feature.

See https://github.com/silverstripe/silverstripe-tagfield/issues/107

[robbieaverill]

Adding a note to the previous comment that the TagField implementation (not complete yet) uses the same react-select library we'd probably end up using here for multi select fields, and ideally TagField would then be refactored to use the core form field instead of re-implementing the same thing.

FWIW the current state of TagField is that the field works in entwine forms but not in React forms (issues: https://github.com/silverstripe/silverstripe-admin/issues/755 and https://github.com/silverstripe/silverstripe-tagfield/issues/107)

[ScopeyNZ]

This is becoming more of problem as we move more forms to FormBuilder. Listbox is completely different.

[ScopeyNZ]

I think we can probably consider the Listbox problem as a bug. It looks nothing like it's SSViewer counterpart.

[lhalaa]

Another use case for the ListboxField is for search forms in ModelAdmin. Adding a ListboxField only displays a long list of checkbox fields which is not ideal.