✨ [#4908] Add possibility to enable multi in SelectWithoutFormik comp…

…onent.

Part of #4908, where multi-selection of the variables is needed.

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}
     />

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,

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 (
     <VariableSelection
@@ -16,6 +16,7 @@ const render = ({name, includeStaticVariables, filter, menuIsOpen = false}) => {
       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 => (
+      <ReactSelectContext.Provider value={{parentSelector: () => undefined}}>
+        <Story />
+      </ReactSelectContext.Provider>
+    ),
+  ],
+  args: {
+    value: ['key2', 'key5'],
+    menuIsOpen: true,
+    isMulti: true,
+  },
+};