Merge pull request #5018 from open-formulieren/chore/4908-enable-mult…

…i-for-variable-selection-component

Add possibility to enable multi-selection in SelectWithoutFormik

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,12 +22,15 @@ const styles = {
   }),
   indicatorsContainer: baseStyles => ({
     ...baseStyles,
-    height: 'calc(1.875rem - 2px)',
-    padding: '0 2px',
+    padding: '0px 2px',
   }),
   dropdownIndicator: (...args) => ({
     ...initialStyles.dropdownIndicator(...args),
-    padding: '5px 2px',
+    padding: '4px 2px',
+  }),
+  clearIndicator: (...args) => ({
+    ...initialStyles.clearIndicator(...args),
+    padding: '4px 2px',
   }),
 };
 
@@ -90,9 +91,15 @@ const SelectWithoutFormik = ({name, options, value, className, onChange, ...prop
       menuPlacement="auto"
       menuPortalTarget={parentSelector()}
       options={options}
-      value={getValue(options, value)}
+      value={props.isMulti ? value.map(v => getValue(options, v)) : getValue(options, value)}
       onChange={selectedOption => {
-        onChange(selectedOption === null ? undefined : selectedOption.value);
+        let transformedValue;
+        if (props.isMulti) {
+          transformedValue = selectedOption.map(option => option.value);
+        } else {
+          transformedValue = selectedOption === null ? undefined : selectedOption.value;
+        }
+        onChange(transformedValue);
       }}
       {...props}
     />

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.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
   onChange: PropTypes.func.isRequired,
   includeStaticVariables: PropTypes.bool,
   filter: PropTypes.func,

src/openforms/js/components/admin/forms/VariableSelection.stories.js

@@ -6,7 +6,21 @@ import {VARIABLE_SOURCES} from '../form_design/variables/constants';
 import {ReactSelectContext} from './ReactSelect';
 import VariableSelection from './VariableSelection';
 
-const render = ({name, includeStaticVariables, filter, menuIsOpen = false}) => {
+// workaround for https://github.com/JedWatson/react-select/issues/3708
+const resetParentSelector = Story => (
+  <ReactSelectContext.Provider value={{parentSelector: () => undefined}}>
+    <Story />
+  </ReactSelectContext.Provider>
+);
+
+const render = ({
+  name,
+  includeStaticVariables,
+  filter,
+  menuIsOpen = false,
+  isMulti = false,
+  isClearable = false,
+}) => {
   const [{value}, updateArgs] = useArgs();
   return (
     <VariableSelection
@@ -16,6 +30,8 @@ const render = ({name, includeStaticVariables, filter, menuIsOpen = false}) => {
       onChange={event => updateArgs({value: event.target.value})}
       filter={filter}
       menuIsOpen={menuIsOpen}
+      isMulti={isMulti}
+      isClearable={isClearable}
     />
   );
 };
@@ -118,15 +134,23 @@ export default {
 export const Default = {};
 
 export const menuOpen = {
-  decorators: [
-    // workaround for https://github.com/JedWatson/react-select/issues/3708
-    Story => (
-      <ReactSelectContext.Provider value={{parentSelector: () => undefined}}>
-        <Story />
-      </ReactSelectContext.Provider>
-    ),
-  ],
+  decorators: [resetParentSelector],
+  args: {
+    menuIsOpen: true,
+  },
+};
+
+export const multiSelection = {
+  decorators: [resetParentSelector],
   args: {
+    value: ['key2', 'key5'],
     menuIsOpen: true,
+    isMulti: true,
+  },
+};
+
+export const Clearable = {
+  args: {
+    isClearable: true,
   },
 };