Merge pull request #1078 from rvsia/fixCarbonMultiSelect

fix(carbon): fix empty initial value in multi select

Author: rvsia

packages/carbon-component-mapper/src/select/select.js

@@ -16,8 +16,10 @@ export const multiOnChange = (input, simpleValue) => ({ selectedItem, selectedIt
   }
 };
 
-const getMultiValue = (value, options) =>
-  (Array.isArray(value) ? value : [value]).map((item) => (typeof item === 'object' ? item : options.find(({ value }) => value === item))) || [];
+export const getMultiValue = (value, options) =>
+  (Array.isArray(value) ? value : value ? [value] : []).map((item) =>
+    typeof item === 'object' ? item : options.find(({ value }) => value === item)
+  );
 
 const ClearedMultiSelectFilterable = ({
   invalidText,

packages/carbon-component-mapper/src/tests/select.test.js

@@ -7,6 +7,7 @@ import FormTemplate from '../form-template';
 import componentMapper from '../component-mapper';
 import { Select, MultiSelect, ComboBox } from 'carbon-components-react';
 import { multiOnChange } from '../select';
+import { getMultiValue } from '../select/select';
 
 describe('<Select />', () => {
   it('renders select', () => {
@@ -193,4 +194,38 @@ describe('<Select />', () => {
       expect(input.onChange).toHaveBeenCalledWith([{ value: '123' }, { value: '345' }]);
     });
   });
+
+  describe('getMultiValue', () => {
+    let value;
+    let options;
+
+    beforeEach(() => {
+      value = undefined;
+      options = [];
+    });
+
+    it('undefined', () => {
+      expect(getMultiValue(value, options)).toEqual([]);
+    });
+
+    it('array', () => {
+      value = ['dogs'];
+      options = [
+        { label: 'cats', value: 'cats' },
+        { label: 'dogs', value: 'dogs' }
+      ];
+
+      expect(getMultiValue(value, options)).toEqual([{ label: 'dogs', value: 'dogs' }]);
+    });
+
+    it('single', () => {
+      value = 'dogs';
+      options = [
+        { label: 'cats', value: 'cats' },
+        { label: 'dogs', value: 'dogs' }
+      ];
+
+      expect(getMultiValue(value, options)).toEqual([{ label: 'dogs', value: 'dogs' }]);
+    });
+  });
 });