Fix MultipleDropDown

package.json

@@ -6,7 +6,7 @@
   "homepage": "https://deskpro.github.io/portal-components",
   "dependencies": {
     "@deskpro/js-utils": "^1.0.4",
-    "@deskpro/react-datepicker-hijri": "^1.4.2-beta.1",
+    "@deskpro/react-datepicker-hijri": "^1.5.0",
     "@storybook/addon-knobs": "^3.4.3",
     "classnames": "^2.2.5",
     "emotion": "^9.2.6",

src/Components/Choices/MultipleDropDown.jsx

@@ -89,33 +89,35 @@ class MultipleDropDown extends Field {
   };
 
   renderField = (form) => {
-    const { name, options, ...props } = this.props;
-    return (
-      <ReactSelect
-        value={getIn(form.values, name)}
-        name={name}
-        isClearable={false}
-        onChange={value => this.handleChange(form, value)}
-        onBlur={() => form.setFieldTouched(name, true)}
-        options={options}
-        removeSelected={false}
-        menuIsOpen
-        components={{ Option, SelectContainer }}
-        optionRenderer={option => this.renderOption(option, form)}
-        classNamePrefix="react-select"
-        isMulti
-        {...props}
-      />
-    );
+    const { name, dataSource, ...props } = this.props;
+    if (Array.isArray(dataSource.getOptions)) {
+      return (
+        <ReactSelect
+          value={dataSource.getOptions.filter(o => getIn(form.values, name).includes(o.value))}
+          name={name}
+          isClearable={false}
+          onChange={value => this.handleChange(form, value)}
+          onBlur={() => form.setFieldTouched(name, true)}
+          options={dataSource.getOptions}
+          hideSelectedOptions={false}
+          menuIsOpen
+          components={{ Option, SelectContainer }}
+          optionRenderer={option => this.renderOption(option, form)}
+          classNamePrefix="react-select"
+          isMulti
+          {...props}
+        />
+      );
+    }
+    return null;
   }
 }
 
 MultipleDropDown.propTypes = {
   ...Field.propTypes,
-  options: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-    value: PropTypes.any.isRequired
-  })),
+  dataSource: PropTypes.shape({
+    getOptions: PropTypes.oneOfType([PropTypes.func, PropTypes.array]).isRequired,
+  }).isRequired,
   handleChange: PropTypes.func,
 };
 

src/style.css

@@ -80,8 +80,7 @@
   }
   & input:focus ~ .dp-pc_label,
   &:not(.dp-pc_empty) .dp-pc_label,
-  & .Select.is-focused ~ .dp-pc_label,
-  & .Select.is-open ~ .dp-pc_label {
+  & .react-select__is-focused ~ .dp-pc_label {
     top: 11px;
     left: 10px;
     font-size: 10px;
@@ -335,24 +334,23 @@
       & .react-select__multi-value {
         line-height: 1.2;
         background-color: var(--option-background);
-        border-color: var(--checkbox-border);
         color: var(--text-color);
         border-radius: 4px;
-        border-width: 2px;
+        border: 2px solid var(--checkbox-border);
         margin-top: 15px;
       }
     }
-    & .Select-control .Select-value-label {
+    & .react-select__multi-value__label {
       position: static;
       font-size: 12px;
     }
-    & .Select-value-icon {
+    & .react-select__multi-value__remove {
       border-right: none;
       font-size: 18px;
       padding: 0 5px;
     }
-    & .Select-control .Select-input > input {
-      margin-top: 6px;
+    & .react-select__input > input {
+      margin-top: 12px;
     }
   }
   & .react-select__menu {

tests/storybook/multiple_dropdown.jsx

@@ -22,7 +22,7 @@ storiesOf('Choices', module)
         <Form>
           <MultipleDropDown
             name="filling"
-            options={options}
+            dataSource={{ getOptions: options }}
             label="Filling"
           />
           <Submit>Submit</Submit>