diff --git a/.changeset/dry-pumas-complain.md b/.changeset/dry-pumas-complain.md new file mode 100644 index 0000000000..6ec1bea60e --- /dev/null +++ b/.changeset/dry-pumas-complain.md @@ -0,0 +1,5 @@ +--- +"react-select": major +--- + +Standardized value passed to onChange diff --git a/packages/react-select/src/Select.js b/packages/react-select/src/Select.js index 711a9f54b8..d198ac1c2f 100644 --- a/packages/react-select/src/Select.js +++ b/packages/react-select/src/Select.js @@ -702,12 +702,18 @@ export default class Select extends Component { } }; 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 { 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, }); diff --git a/packages/react-select/src/__tests__/Select.test.js b/packages/react-select/src/__tests__/Select.test.js index 6222482d3b..abc098c6b5 100644 --- a/packages/react-select/src/__tests__/Select.test.js +++ b/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( - + ); + 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( +