diff --git a/src/openforms/js/components/admin/forms/ReactSelect.js b/src/openforms/js/components/admin/forms/ReactSelect.js index 582fe2722e..3ebe1f22e6 100644 --- a/src/openforms/js/components/admin/forms/ReactSelect.js +++ b/src/openforms/js/components/admin/forms/ReactSelect.js @@ -11,11 +11,9 @@ const styles = { control: (...args) => ({ ...initialStyles.control(...args), minHeight: '1.875rem', - height: '1.875rem', }), valueContainer: (...args) => ({ ...initialStyles.valueContainer(...args), - height: 'calc(1.875rem - 2px)', padding: '0 6px', }), input: (...args) => ({ @@ -24,7 +22,6 @@ const styles = { }), indicatorsContainer: baseStyles => ({ ...baseStyles, - height: 'calc(1.875rem - 2px)', padding: '0 2px', }), dropdownIndicator: (...args) => ({ @@ -67,6 +64,16 @@ const getValue = (options, value) => { return null; }; +/** + * Convenience method around 'getValue', which allows the `values` argument to be an array of + * values (used for multi-select components). + */ +const getValueStringOrArray = (options, value) => { + return Object.prototype.toString.call(value) !== '[object Array]' + ? getValue(options, value) + : value.map(v => getValue(options, v)); +}; + export const ReactSelectContext = createContext({parentSelector: () => document.body}); ReactSelectContext.displayName = 'ReactSelectContext'; @@ -90,9 +97,15 @@ const SelectWithoutFormik = ({name, options, value, className, onChange, ...prop menuPlacement="auto" menuPortalTarget={parentSelector()} options={options} - value={getValue(options, value)} + value={getValueStringOrArray(options, value)} onChange={selectedOption => { - onChange(selectedOption === null ? undefined : selectedOption.value); + onChange( + Object.prototype.toString.call(selectedOption) !== '[object Array]' + ? selectedOption === null + ? undefined + : selectedOption.value + : selectedOption.map(option => (option === null ? undefined : option.value)) + ); }} {...props} /> diff --git a/src/openforms/js/components/admin/forms/VariableSelection.js b/src/openforms/js/components/admin/forms/VariableSelection.js index da9b0eba77..0ab214365c 100644 --- a/src/openforms/js/components/admin/forms/VariableSelection.js +++ b/src/openforms/js/components/admin/forms/VariableSelection.js @@ -85,7 +85,7 @@ const VariableSelection = ({ VariableSelection.propTypes = { id: PropTypes.string, name: PropTypes.string, - value: PropTypes.string, + value: PropTypes.string | PropTypes.array, onChange: PropTypes.func.isRequired, includeStaticVariables: PropTypes.bool, filter: PropTypes.func, diff --git a/src/openforms/js/components/admin/forms/VariableSelection.stories.js b/src/openforms/js/components/admin/forms/VariableSelection.stories.js index 8da4d86efc..e427b7eaae 100644 --- a/src/openforms/js/components/admin/forms/VariableSelection.stories.js +++ b/src/openforms/js/components/admin/forms/VariableSelection.stories.js @@ -6,7 +6,7 @@ import {VARIABLE_SOURCES} from '../form_design/variables/constants'; import {ReactSelectContext} from './ReactSelect'; import VariableSelection from './VariableSelection'; -const render = ({name, includeStaticVariables, filter, menuIsOpen = false}) => { +const render = ({name, includeStaticVariables, filter, menuIsOpen = false, isMulti = false}) => { const [{value}, updateArgs] = useArgs(); return ( { onChange={event => updateArgs({value: event.target.value})} filter={filter} menuIsOpen={menuIsOpen} + isMulti={isMulti} /> ); }; @@ -130,3 +131,19 @@ export const menuOpen = { menuIsOpen: true, }, }; + +export const multiSelection = { + decorators: [ + // workaround for https://github.com/JedWatson/react-select/issues/3708 + Story => ( + undefined}}> + + + ), + ], + args: { + value: ['key2', 'key5'], + menuIsOpen: true, + isMulti: true, + }, +};