Merge pull request #1119 from rvsia/fixClearOptions

fix(common): handle isMulti and null change

Author: Hyperkid123

packages/common/src/select/select.js

@@ -42,11 +42,11 @@ const handleSelectChange = (option, simpleValue, isMulti, onChange, allOptions,
 
   const sanitizedOption = !enhanceOption && isMulti ? [] : enhanceOption;
 
-  if (isMulti && enhanceOption.find(({ selectAll }) => selectAll)) {
+  if (isMulti && sanitizedOption.find(({ selectAll }) => selectAll)) {
     return onChange(allOptions.filter(({ selectAll, selectNone }) => !selectAll && !selectNone).map(({ value }) => value));
   }
 
-  if (isMulti && enhanceOption.find(({ selectNone }) => selectNone)) {
+  if (isMulti && sanitizedOption.find(({ selectNone }) => selectNone)) {
     return onChange([]);
   }
 

packages/common/src/tests/select/select.test.js

@@ -314,6 +314,53 @@ describe('Select test', () => {
       expect(inputValue).toEqual(['d', 'c']);
     });
 
+    it('selects null value - clears selection', async () => {
+      field = { ...field, isMulti: true };
+
+      await act(async () => {
+        wrapper = mount(
+          <FormRenderer
+            {...rendererProps}
+            schema={{
+              fields: [
+                {
+                  ...field,
+                  component: componentTypes.SELECT,
+                  name: 'select'
+                }
+              ]
+            }}
+          />
+        );
+      });
+      wrapper.update();
+
+      await act(async () => {
+        wrapper
+          .find('#onChange')
+          .props()
+          .onClick([{ value: 'd' }, { value: 'c' }]);
+      });
+      wrapper.update();
+
+      expect(state.value).toEqual([
+        { label: 'Dogs', value: 'd' },
+        { label: 'Cats', value: 'c' }
+      ]);
+      expect(inputValue).toEqual(['d', 'c']);
+
+      await act(async () => {
+        wrapper
+          .find('#onChange')
+          .props()
+          .onClick(null);
+      });
+      wrapper.update();
+
+      expect(state.value).toEqual([]);
+      expect(inputValue).toEqual([]);
+    });
+
     it('selects all values', async () => {
       field = { ...field, isMulti: true, options: [{ label: 'Select all', selectAll: true }, ...field.options] };