Fixed multiple value handling on SelectControl component. (#5587)

components/select-control/README.md

@@ -19,10 +19,28 @@ Render a user interface to select the size of an image.
 	/>
 ```
 
+Render a user interface to select multiple users from a list.
+```jsx
+	<SelectControl
+		multiple
+		label={ __( 'Select some users:' ) }
+		value={ this.state.users } // e.g: value = [ 'a', 'c' ]
+		onChange={ ( users ) => { this.setState( { users } ) } }
+		options={ [
+			{ value: 'a', label: 'User A' },
+			{ value: 'b', label: 'User B' },
+			{ value: 'c', label: 'User c' },
+		] }
+	/>
+```
+
 ## Props
 
 The set of props accepted by the component will be specified below.
 Props not included in this set will be applied to the select element.
+One important prop to refer is value, if multiple is true,
+value should be an array with the values of the selected options.
+If multiple is false value should be equal to the value of the selected option.
 
 ### label
 
@@ -38,6 +56,13 @@ If this property is added, a help text will be generated using help property as
 - Type: `String`
 - Required: No
 
+### multiple
+
+If this property is added, multiple values can be selected. The value passed should be an array.
+
+- Type: `Boolean`
+- Required: No
+
 ### options
 
 An array of objects containing the following properties:
@@ -50,6 +75,8 @@ An array of objects containing the following properties:
 ### onChange
 
 A function that receives the value of the new option that is being selected as input.
+If multiple is true the value received is an array of the selected value.
+If multiple is false the value received is a single value with the new selected value.
 
 - Type: `function`
 - Required: Yes

components/select-control/index.js

@@ -10,9 +10,25 @@ import BaseControl from '../base-control';
 import withInstanceId from '../higher-order/with-instance-id';
 import './style.scss';
 
-function SelectControl( { label, help, instanceId, onChange, options = [], ...props } ) {
+function SelectControl( {
+	help,
+	instanceId,
+	label,
+	multiple = false,
+	onChange,
+	options = [],
+	...props
+} ) {
 	const id = `inspector-select-control-${ instanceId }`;
-	const onChangeValue = ( event ) => onChange( event.target.value );
+	const onChangeValue = ( event ) => {
+		if ( multiple ) {
+			const selectedOptions = [ ...event.target.options ].filter( ( { selected } ) => selected );
+			const newValues = selectedOptions.map( ( { value } ) => value );
+			onChange( newValues );
+			return;
+		}
+		onChange( event.target.value );
+	};
 
 	// Disable reason: A select with an onchange throws a warning
 
@@ -24,6 +40,7 @@ function SelectControl( { label, help, instanceId, onChange, options = [], ...pr
 				className="components-select-control__input"
 				onChange={ onChangeValue }
 				aria-describedby={ !! help ? id + '__help' : undefined }
+				multiple={ multiple }
 				{ ...props }
 			>
 				{ options.map( ( option ) =>