From fcdeb2b4c5a20d7315cce365c8be794bcc614fb1 Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Thu, 17 Dec 2020 22:04:13 -0500 Subject: [PATCH 1/7] Pass [] instead of null in onChange when no values on multi-select --- packages/react-select/src/Select.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/react-select/src/Select.js b/packages/react-select/src/Select.js index c6cf12ae79..578446fe8a 100644 --- a/packages/react-select/src/Select.js +++ b/packages/react-select/src/Select.js @@ -682,12 +682,13 @@ 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( i => this.getOptionValue(i) !== candidate ); - this.onChange(newValue.length ? newValue : null, { + this.onChange(isMulti ? newValue : null, { action: 'remove-value', removedValue, }); @@ -704,6 +705,7 @@ export default class Select extends Component { this.onChange(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); @@ -713,7 +715,7 @@ export default class Select extends Component { value: lastSelectedValue ? this.getOptionLabel(lastSelectedValue) : '', }, }); - this.onChange(newValue.length ? newValue : null, { + this.onChange(isMulti ? newValue : null, { action: 'pop-value', removedValue: lastSelectedValue, }); From ffb47409c6ebfd2c962ca6bda8bc6ba2ffd843d7 Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Thu, 17 Dec 2020 23:01:46 -0500 Subject: [PATCH 2/7] Change --- packages/react-select/src/Select.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/react-select/src/Select.js b/packages/react-select/src/Select.js index 578446fe8a..3ee6031d2d 100644 --- a/packages/react-select/src/Select.js +++ b/packages/react-select/src/Select.js @@ -685,10 +685,15 @@ export default class Select extends Component { const { isMulti } = this.props; const { selectValue } = this.state; const candidate = this.getOptionValue(removedValue); - const newValue = selectValue.filter( + const filteredValue = selectValue.filter( i => this.getOptionValue(i) !== candidate ); - this.onChange(isMulti ? newValue : null, { + const newValue = isMulti + ? filteredValue + : filteredValue.length > 0 + ? filteredValue[0] + : null; + this.onChange(newValue, { action: 'remove-value', removedValue, }); @@ -708,7 +713,12 @@ export default class Select extends Component { const { isMulti } = this.props; const { selectValue } = this.state; const lastSelectedValue = selectValue[selectValue.length - 1]; - const newValue = selectValue.slice(0, selectValue.length - 1); + const slicedValue = selectValue.slice(0, selectValue.length - 1); + const newValue = isMulti + ? slicedValue + : slicedValue.length > 0 + ? slicedValue[0] + : null; this.announceAriaLiveSelection({ event: 'pop-value', context: { From 020506755728f607a77145e2a00458526596496f Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Thu, 17 Dec 2020 23:03:34 -0500 Subject: [PATCH 3/7] Create dry-pumas-complain.md --- .changeset/dry-pumas-complain.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/dry-pumas-complain.md 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 From 82c82fa659dc1f351dca1ace5ecc2ceabe790e0c Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Fri, 18 Dec 2020 09:42:33 -0500 Subject: [PATCH 4/7] Remove style changes --- packages/react-select/src/Select.js | 16 ++-- .../react-select/src/__tests__/Select.test.js | 82 +++++++++---------- 2 files changed, 48 insertions(+), 50 deletions(-) diff --git a/packages/react-select/src/Select.js b/packages/react-select/src/Select.js index 3ee6031d2d..c874cfec42 100644 --- a/packages/react-select/src/Select.js +++ b/packages/react-select/src/Select.js @@ -685,13 +685,13 @@ export default class Select extends Component { const { isMulti } = this.props; const { selectValue } = this.state; const candidate = this.getOptionValue(removedValue); - const filteredValue = selectValue.filter( + const newValues = selectValue.filter( i => this.getOptionValue(i) !== candidate ); const newValue = isMulti - ? filteredValue - : filteredValue.length > 0 - ? filteredValue[0] + ? newValues + : newValues.length > 0 + ? newValues[0] : null; this.onChange(newValue, { action: 'remove-value', @@ -713,11 +713,11 @@ export default class Select extends Component { const { isMulti } = this.props; const { selectValue } = this.state; const lastSelectedValue = selectValue[selectValue.length - 1]; - const slicedValue = selectValue.slice(0, selectValue.length - 1); + const newValues = selectValue.slice(0, selectValue.length - 1); const newValue = isMulti - ? slicedValue - : slicedValue.length > 0 - ? slicedValue[0] + ? newValues + : newValues.length > 0 + ? newValues[0] : null; this.announceAriaLiveSelection({ event: 'pop-value', diff --git a/packages/react-select/src/__tests__/Select.test.js b/packages/react-select/src/__tests__/Select.test.js index b0ab8d52c6..aadc6ea128 100644 --- a/packages/react-select/src/__tests__/Select.test.js +++ b/packages/react-select/src/__tests__/Select.test.js @@ -1643,48 +1643,46 @@ 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( - + ); + selectWrapper + .find(Control) + .simulate('keyDown', { 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 selectWrapper = mount( + ); - selectWrapper - .find(Control) - .simulate('keyDown', { keyCode: 8, key: 'Backspace' }); + fireEvent.keyDown(container.querySelector('.react-select__control'), { + keyCode: 8, + key: 'Backspace', + }); expect(onChangeSpy).toHaveBeenCalledWith(null, { action: 'clear', name: 'test-input-name', @@ -1665,7 +1666,7 @@ test('should call onChange with `null` on hitting backspace when backspaceRemove test('should call onChange with an array on hitting backspace when backspaceRemovesValue is true and isMulti is true', () => { let onChangeSpy = jest.fn(); - let selectWrapper = mount( + let { container } = render(