From 7ac4104b3f2b054f7f769f164c5ad9304a80ae69 Mon Sep 17 00:00:00 2001 From: Mark Hobson Date: Wed, 28 Nov 2018 12:58:25 -0700 Subject: [PATCH] Added onBlurResetsInput property to clear input onBlur or leave partial input Updated tests to check that onBlurResetsInput does not call onInputChange if set to false Updated documentation with onBlurResetsInput property --- src/Select.js | 15 ++++++++++---- src/__tests__/Select.test.js | 20 +++++++++++++++++-- .../__snapshots__/Async.test.js.snap | 8 ++++++++ .../__snapshots__/AsyncCreatable.test.js.snap | 8 ++++++++ .../__snapshots__/Select.test.js.snap | 7 +++++++ .../__snapshots__/StateManaged.test.js.snap | 1 + 6 files changed, 53 insertions(+), 6 deletions(-) diff --git a/src/Select.js b/src/Select.js index 45c06f333e..e18e198f88 100644 --- a/src/Select.js +++ b/src/Select.js @@ -200,6 +200,8 @@ export type Props = { noOptionsMessage: ({ inputValue: string }) => string | null, /* Handle blur events on the control */ onBlur?: FocusEventHandler, + /* Whether to clear partial input when the control is blurred */ + onBlurResetsInput: boolean, /* Handle change events on the select */ onChange: (ValueType, ActionMeta) => void, /* Handle focus events on the control */ @@ -274,6 +276,7 @@ export const defaultProps = { noOptionsMessage: () => 'No options', openMenuOnFocus: false, openMenuOnClick: true, + onBlurResetsInput: true, options: [], pageSize: 5, placeholder: 'Select...', @@ -453,7 +456,9 @@ export default class Select extends Component { event: 'input', context: { isSearchable, isMulti }, }); - this.onInputChange('', { action: 'menu-close' }); + if (this.props.onBlurResetsInput) { + this.onInputChange('', { action: 'menu-close' }); + } this.props.onMenuClose(); } onInputChange(newValue: string, actionMeta: InputActionMeta) { @@ -1071,7 +1076,9 @@ export default class Select extends Component { if (this.props.onBlur) { this.props.onBlur(event); } - this.onInputChange('', { action: 'input-blur' }); + if (this.props.onBlurResetsInput) { + this.onInputChange('', {action: 'input-blur'}); + } this.onMenuClose(); this.setState({ focusedValue: null, @@ -1427,8 +1434,8 @@ export default class Select extends Component { if (!this.hasValue() || !controlShouldRenderValue) { return inputValue ? null : ( - { @@ -1449,7 +1449,7 @@ test('should call onChange with an array on hitting backspace when backspaceRemo selectWrapper .find(Control) .simulate('keyDown', { keyCode: 8, key: 'Backspace' }); - expect(onChangeSpy).toHaveBeenCalledWith([], { action: 'pop-value' }); + 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', () => { @@ -1735,6 +1735,22 @@ test('onInputChange() function prop to be called on blur', () => { expect(onInputChangeSpy).toHaveBeenCalledTimes(2); }); +test('onInputChange() function prop to not be called on blur with onBlurResetsInput', () => { + let onInputChangeSpy = jest.fn(); + let selectWrapper = mount( +