✨ [#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,12 +22,11 @@ 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',
   }),
 };
 
@@ -90,9 +87,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,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,
+  },
+};