Merge pull request #4339 from Methuselah96/on-change-null

Modify onChange with empty value behaviour for multi select to always pass an empty array

Author: JedWatson

.changeset/dry-pumas-complain.md

@@ -0,0 +1,5 @@
+---
+"react-select": major
+---
+
+Standardized value passed to onChange

packages/react-select/src/Select.js

@@ -702,12 +702,18 @@ export default class Select extends Component<Props, State> {
     }
   };
   removeValue = (removedValue: OptionType) => {
+    const { isMulti } = this.props;
     const { selectValue } = this.state;
     const candidate = this.getOptionValue(removedValue);
-    const newValue = selectValue.filter(
+    const newValueArray = selectValue.filter(
       i => this.getOptionValue(i) !== candidate
     );
-    this.onChange(newValue.length ? newValue : null, {
+    const newValue = isMulti
+      ? newValueArray
+      : newValueArray.length > 0
+      ? newValueArray[0]
+      : null;
+    this.onChange(newValue, {
       action: 'remove-value',
       removedValue,
     });
@@ -720,19 +726,25 @@ export default class Select extends Component<Props, State> {
     this.focusInput();
   };
   clearValue = () => {
-    this.onChange(null, { action: 'clear' });
+    this.onChange(this.props.isMulti ? [] : null, { action: 'clear' });
   };
   popValue = () => {
+    const { isMulti } = this.props;
     const { selectValue } = this.state;
     const lastSelectedValue = selectValue[selectValue.length - 1];
-    const newValue = selectValue.slice(0, selectValue.length - 1);
+    const newValueArray = selectValue.slice(0, selectValue.length - 1);
+    const newValue = isMulti
+      ? newValueArray
+      : newValueArray.length > 0
+      ? newValueArray[0]
+      : null;
     this.announceAriaLiveSelection({
       event: 'pop-value',
       context: {
         value: lastSelectedValue ? this.getOptionLabel(lastSelectedValue) : '',
       },
     });
-    this.onChange(newValue.length ? newValue : null, {
+    this.onChange(newValue, {
       action: 'pop-value',
       removedValue: lastSelectedValue,
     });

packages/react-select/src/__tests__/Select.test.js

@@ -1643,48 +1643,48 @@ test('should not call onChange on hitting backspace even when backspaceRemovesVa
   expect(onChangeSpy).not.toHaveBeenCalled();
 });
 
-cases(
-  'should call onChange with `null` on hitting backspace when backspaceRemovesValue is true',
-  ({ props = { ...BASIC_PROPS }, expectedValue }) => {
-    let onChangeSpy = jest.fn();
-    let { container } = render(
-      <Select
-        {...props}
-        backspaceRemovesValue
-        isClearable
-        onChange={onChangeSpy}
-      />
-    );
-    fireEvent.keyDown(container.querySelector('.react-select__control'), {
-      keyCode: 8,
-      key: 'Backspace',
-    });
-    expect(onChangeSpy).toHaveBeenCalledWith(null, expectedValue);
-  },
-  {
-    'and isMulti is false': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: false,
-      },
-      expectedValue: {
-        action: 'clear',
-        name: 'test-input-name',
-      },
-    },
-    'and isMulti is true': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
-      },
-      expectedValue: {
-        action: 'pop-value',
-        name: 'test-input-name',
-        removedValue: undefined,
-      },
-    },
-  }
-);
+test('should call onChange with `null` on hitting backspace when backspaceRemovesValue is true and isMulti is false', () => {
+  let onChangeSpy = jest.fn();
+  let { container } = render(
+    <Select
+      {...BASIC_PROPS}
+      backspaceRemovesValue
+      isClearable
+      isMulti={false}
+      onChange={onChangeSpy}
+    />
+  );
+  fireEvent.keyDown(container.querySelector('.react-select__control'), {
+    keyCode: 8,
+    key: 'Backspace',
+  });
+  expect(onChangeSpy).toHaveBeenCalledWith(null, {
+    action: 'clear',
+    name: 'test-input-name',
+  });
+});
+
+test('should call onChange with an array on hitting backspace when backspaceRemovesValue is true and isMulti is true', () => {
+  let onChangeSpy = jest.fn();
+  let { container } = render(
+    <Select
+      {...BASIC_PROPS}
+      backspaceRemovesValue
+      isClearable
+      isMulti
+      onChange={onChangeSpy}
+    />
+  );
+  fireEvent.keyDown(container.querySelector('.react-select__control'), {
+    keyCode: 8,
+    key: 'Backspace',
+  });
+  expect(onChangeSpy).toHaveBeenCalledWith([], {
+    action: 'pop-value',
+    name: 'test-input-name',
+    removedValue: undefined,
+  });
+});
 
 test('multi select > clicking on X next to option will call onChange with all options other that the clicked option', () => {
   let onChangeSpy = jest.fn();
@@ -2305,7 +2305,7 @@ test('clear select by clicking on clear button > should not call onMenuOpen', ()
     container.querySelector('.react-select__clear-indicator'),
     { button: 0 }
   );
-  expect(onChangeSpy).toBeCalledWith(null, {
+  expect(onChangeSpy).toBeCalledWith([], {
     action: 'clear',
     name: BASIC_PROPS.name,
   });