diff --git a/packages/react-components/source/react/library/select/Select.js b/packages/react-components/source/react/library/select/Select.js index 35138399b..21dfa85c7 100644 --- a/packages/react-components/source/react/library/select/Select.js +++ b/packages/react-components/source/react/library/select/Select.js @@ -129,15 +129,12 @@ class Select extends Component { } static getDerivedStateFromProps(props, state) { - let newProps; - if (isControlled(props) || !state.open) { - newProps = { + return { listValue: props.value, }; } - - return newProps; + return null; } // If `open` prop is passed as default, let's trigger menu open @@ -192,6 +189,10 @@ class Select extends Component { this.setState({ focusedIndex: 0 }); } + + if (type !== MULTISELECT) { + this.closeAndFocusButton(); + } } onActionClick() { @@ -280,10 +281,17 @@ class Select extends Component { } getButtonLabel() { - const { type, options, value } = this.props; + const { type, options, value, placeholder } = this.props; + if (!value || value.length === 0) { + return placeholder; + } + + if (type === MULTISELECT) { + const selectedOptions = options + .filter(option => value.includes(option.value)) + .map(option => option.selectedLabel || option.label); - if (type === MULTISELECT || !value) { - return null; + return selectedOptions.join(', '); } const selectedOption = options.find(option => option.value === value); @@ -293,7 +301,6 @@ class Select extends Component { getOptions() { const { options, value, type, onFilter } = this.props; - let filteredOptions = options; // If the ingesting app uses the onFilter event handler, it should provide the filtered options @@ -454,7 +461,6 @@ class Select extends Component { onEscape={closeAndFocusButton} onChange={onValueChange} onFocusItem={onFocusItem} - onClickItem={closeAndFocusButton} footer={footer} style={menuStyle} actionLabel={getActionLabel(this.props)} diff --git a/packages/react-components/source/react/library/select/Select.md b/packages/react-components/source/react/library/select/Select.md index 9857fdaf1..1ad380faa 100644 --- a/packages/react-components/source/react/library/select/Select.md +++ b/packages/react-components/source/react/library/select/Select.md @@ -74,3 +74,45 @@ const style = { margin: 10 }; /> ; ``` + + +### MultiSelect + +With type `multiselect`, the Select input will allow multiple values to be selected. In this mode an Apply button will render below the options list. The newly selected values are not applied until the user activates this button unless the `applyImmediately` props has been passed a boolean value of true in which case it will apply immediately. If the options chosen exceed the side of the input the excess content will be replaced with an ellipsis. If they escape or click out of the open menu, their changes will be discarded. + +```jsx +initialState = { + value: [], +}; + +const options = [ + { value: 'en', label: 'English' }, + { value: 'ru', label: 'русский' }, + { value: 'zh', label: '中文' }, + { value: 'sq', label: 'Albanian' }, + { value: 'ar', label: 'Arabic' }, + { value: 'eu', label: 'Basque' }, + { value: 'bn', label: 'Bengali' }, + { value: 'bs', label: 'Bosnian' }, + { value: 'bg', label: 'Bulgarian' }, + { value: 'ca', label: 'Catalan' }, +]; + +const style = { margin: 10 }; + +