From 936dd6e792d1866128819dace1b77a8b50a7eb2f Mon Sep 17 00:00:00 2001 From: Yuri S Date: Thu, 30 Nov 2017 01:57:38 +0200 Subject: [PATCH 01/12] Fixed reset inputValue on receiving new value. --- src/Select.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/Select.js b/src/Select.js index 3769e7ec4f..7766ad7615 100644 --- a/src/Select.js +++ b/src/Select.js @@ -101,6 +101,10 @@ class Select extends React.Component { // Used to be required but it's not any more this.setState({ required: false }); } + + if (this.state.inputValue && this.props.value !== nextProps.value) { + this.setState({ inputValue: this.handleInputValueChange('') }); + } } componentDidUpdate (prevProps, prevState) { From d212323518d12ae568a9e0afdf1cc8fa615b25f3 Mon Sep 17 00:00:00 2001 From: Yuri S Date: Thu, 30 Nov 2017 03:11:16 +0200 Subject: [PATCH 02/12] Added tests for clear display value on receiving props. --- test/Select-test.js | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/test/Select-test.js b/test/Select-test.js index cb83002a9d..d0cb508e07 100644 --- a/test/Select-test.js +++ b/test/Select-test.js @@ -2246,6 +2246,34 @@ describe('Select', () => { }); }); + describe('clear the display value on receiving props', () => { + beforeEach(() => { + var wrapper = createControlWithWrapper({ + options: defaultOptions, + value: 'one', + }); + }); + it('should clear display value if display is not empty', () => { + expect(instance.state.inputValue, 'to equal', ''); + typeSearchText('and'); + expect(instance.state.inputValue, 'to equal', 'and'); + wrapper.setPropsForChild({ + value: 'newValue', + }); + expect(instance.state.inputValue, 'to equal', ''); + }); + + it('should not clear display value if value in next props is equal to previous', () => { + expect(instance.state.inputValue, 'to equal', ''); + typeSearchText('and'); + expect(instance.state.inputValue, 'to equal', 'and'); + wrapper.setPropsForChild({ + value: 'one', + }); + expect(instance.state.inputValue, 'to equal', 'and'); + }); + }); + describe('clearable=true', () => { beforeEach(() => { From d80a1335d2d0717f30804e8cd5c10e2cab3425cf Mon Sep 17 00:00:00 2001 From: Jacob Zuo Date: Wed, 29 Nov 2017 20:16:54 -0600 Subject: [PATCH 03/12] Fix default isOptionUnique crash if null options --- src/Creatable.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/Creatable.js b/src/Creatable.js index 76cd7754bc..271d302255 100644 --- a/src/Creatable.js +++ b/src/Creatable.js @@ -201,6 +201,10 @@ function defaultChildren (props) { }; function isOptionUnique ({ option, options, labelKey, valueKey }) { + if (!options || !options.length) { + return true; + } + return options .filter((existingOption) => existingOption[labelKey] === option[labelKey] || From 5127be184645fafd37c845615d75310370b7b7f3 Mon Sep 17 00:00:00 2001 From: Jacob Zuo Date: Wed, 29 Nov 2017 20:17:56 -0600 Subject: [PATCH 04/12] Adding tests on default isOptionUnique function --- test/Creatable-test.js | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/test/Creatable-test.js b/test/Creatable-test.js index f22c51cf59..5a58726e3a 100644 --- a/test/Creatable-test.js +++ b/test/Creatable-test.js @@ -221,6 +221,46 @@ describe('Creatable', () => { expect(test(newOption('qux', 4)), 'to be', true); expect(test(newOption('Foo', 11)), 'to be', true); }); + + it('default: isOptionUnique function should always return true if given options are empty', () => { + const options = []; + + function newOption (label, value) { + return { label, value }; + }; + + function test (option) { + return Select.Creatable.isOptionUnique({ + option, + options, + labelKey: 'label', + valueKey: 'value' + }); + }; + + expect(test(newOption('foo', 0)), 'to be', true); + expect(test(newOption('qux', 1)), 'to be', true); + }); + + it('default: isOptionUnique function should not crash if given options are null or undefined', () => { + const options = null; + + function newOption (label, value) { + return { label, value }; + }; + + function test (option) { + return Select.Creatable.isOptionUnique({ + option, + options, + labelKey: 'label', + valueKey: 'value' + }); + }; + + expect(test(newOption('foo', 0)), 'to be', true); + expect(test(newOption('qux', 1)), 'to be', true); + }); it('default :isValidNewOption function should just ensure a non-empty string is provided', () => { function test (label) { From ad0d97e195bbd19b7b39d9b596301dc9de5f21d0 Mon Sep 17 00:00:00 2001 From: Jacob Zuo Date: Wed, 29 Nov 2017 21:06:08 -0600 Subject: [PATCH 05/12] Also pass options as the input param --- src/Creatable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Creatable.js b/src/Creatable.js index 271d302255..43b26ab5aa 100644 --- a/src/Creatable.js +++ b/src/Creatable.js @@ -26,7 +26,7 @@ class CreatableSelect extends React.Component { if (isValidNewOption({ label: this.inputValue })) { const option = newOptionCreator({ label: this.inputValue, labelKey: this.labelKey, valueKey: this.valueKey }); - const isOptionUnique = this.isOptionUnique({ option }); + const isOptionUnique = this.isOptionUnique({ option, options }); // Don't add the same option twice. if (isOptionUnique) { From f6ddda867f8d98aa4eb62b97dde6f4eeec74e2d7 Mon Sep 17 00:00:00 2001 From: DStyleZ Date: Thu, 30 Nov 2017 18:54:55 +0200 Subject: [PATCH 06/12] Use react-input-autosize v2.1.2 for guard against undefined window --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6793b2be86..c60425ed99 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "dependencies": { "classnames": "^2.2.4", "prop-types": "^15.5.8", - "react-input-autosize": "^2.1.0" + "react-input-autosize": "^2.1.2" }, "devDependencies": { "babel-cli": "^6.26.0", From 28bac8fab9b9d85cb27908dac3ec271551e44fc7 Mon Sep 17 00:00:00 2001 From: Srishan Bhattarai Date: Sun, 3 Dec 2017 18:46:57 +0545 Subject: [PATCH 07/12] Fix state value in README example Change this.state.value to this.state.selectedOption.value --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f6e3148b5f..f773f2d3d0 100644 --- a/README.md +++ b/README.md @@ -69,7 +69,7 @@ class App extends React.Component { return ( ` tag | | `noResultsText` | string | 'No results found' | placeholder displayed when there are no matching search results or a falsy value to hide it (can also be a react component) | | `onBlur` | function | undefined | onBlur handler: `function(event) {}` | -| `onBlurResetsInput` | boolean | true | whether to clear input on blur or not | +| `onBlurResetsInput` | boolean | true | Whether to clear input on blur or not. If set to false, it only works if onCloseResetsInput is false as well. | | `onChange` | function | undefined | onChange handler: `function(newOption) {}` | | `onClose` | function | undefined | handler for when the menu closes: `function () {}` | | `onCloseResetsInput` | boolean | true | whether to clear input when closing the menu through the arrow | From 262685aa7ad957bd8c59530b3a4e344ae40ac6e7 Mon Sep 17 00:00:00 2001 From: Kurt Hoyt Date: Tue, 12 Dec 2017 16:45:31 -0500 Subject: [PATCH 11/12] Fix an issue introduced by commit f6920de that results in multiple dropdowns being open at the same time because stopping propagation of the arrow mouse down event in select 2 when opening its dropdown does not allow the blur event to happen for select 1, so the dropdown for select 1 remains open. --- src/Select.js | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/Select.js b/src/Select.js index b4931cd82e..9dedbeff79 100644 --- a/src/Select.js +++ b/src/Select.js @@ -285,19 +285,20 @@ class Select extends React.Component { if (this.props.disabled || (event.type === 'mousedown' && event.button !== 0)) { return; } - // If the menu isn't open, let the event bubble to the main handleMouseDown - if (!this.state.isOpen) { + + if (this.state.isOpen) { + // prevent default event handlers + event.stopPropagation(); + event.preventDefault(); + // close the menu + this.closeMenu(); + } + else { + // If the menu isn't open, let the event bubble to the main handleMouseDown this.setState({ isOpen: true, }); } - // prevent default event handlers - event.stopPropagation(); - event.preventDefault(); - // close the menu - if(this.state.isOpen){ - this.closeMenu(); - } } handleMouseDownOnMenu (event) { From 785358150402d76ae29ee2f8977571b0dc2368cd Mon Sep 17 00:00:00 2001 From: Kurt Hoyt Date: Tue, 12 Dec 2017 16:46:00 -0500 Subject: [PATCH 12/12] Match the else coding style to the project. --- src/Select.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Select.js b/src/Select.js index 9dedbeff79..cfc4bcddbb 100644 --- a/src/Select.js +++ b/src/Select.js @@ -292,8 +292,7 @@ class Select extends React.Component { event.preventDefault(); // close the menu this.closeMenu(); - } - else { + } else { // If the menu isn't open, let the event bubble to the main handleMouseDown this.setState({ isOpen: true,