Merge pull request #2163 from JedWatson/fix/#2156

removed the functionality for searchable select, added tests

src/Select.js

@@ -408,9 +408,10 @@ class Select extends React.Component {
 				}
 			break;
 			case 32: // space
-				if (!this.props.searchable) {
-					event.preventDefault();
+				if (this.props.searchable) {
+					return;
 				}
+				event.preventDefault();
 				if (!this.state.isOpen) {
 					this.focusNextOption();
 					return;

test/Select-test.js

@@ -63,7 +63,7 @@ describe('Select', () => {
 		return ReactDOM.findDOMNode(instance).querySelector('.Select-control');
 	};
 
-	var enterSingleCharacter = ()  =>{
+	var enterSingleCharacter = ()  => {
 		TestUtils.Simulate.keyDown(searchInputNode, { keyCode: 65, key: 'a' });
 	};
 
@@ -111,6 +111,10 @@ describe('Select', () => {
 		TestUtils.Simulate.keyDown(getSelectControl(instance), { keyCode: 36, key: 'Home' });
 	};
 
+	var pressSpaceBar = () => {
+		TestUtils.Simulate.keyDown(getSelectControl(instance), { keyCode: 32, key: 'Space' });
+	};
+
 	var typeSearchText = (text) => {
 		TestUtils.Simulate.change(searchInputNode, { target: { value: text } });
 	};
@@ -4167,34 +4171,6 @@ describe('Select', () => {
 						});
 
 			});
-
-			it('updates the active descendant after a selection using space bar', () => {
-
-				return expect(wrapper,
-						'with event', 'keyDown', ARROW_DOWN, 'on', <div className="Select-control" />,
-						'with event', 'keyDown', KEY_SPACE, 'on', <div className="Select-control" />,
-						'queried for', <input role="combobox" />)
-						.then(input => {
-
-							// [ 'three', 'two', 'one' ] is now selected,
-							// therefore in-focus should be 'four'
-
-							const activeId = input.attributes['aria-activedescendant'].value;
-							expect(ReactDOM.findDOMNode(instance), 'queried for first', '#' + activeId, 'to have text', 'label four');
-						});
-
-			});
-
-			it('expands the drop down when the space bar is pressed', () => {
-
-				return expect(wrapper,
-						'with event', 'keyDown', KEY_SPACE, 'on', <div className="Select-control" />,
-						'queried for', <input role="combobox" />)
-						.then(input => {
-							expect(instance.state.focusedOption, 'to equal', { value: 'one', label: 'label one' });
-						});
-
-			});
 		});
 	});
 
@@ -4274,6 +4250,48 @@ describe('Select', () => {
 			});
 		});
 	});
-
-
+	describe('spacebar functionality', () => {
+		describe('if not searchable', () => {
+			beforeEach(() => {
+				instance = createControl({
+					searchable: false,
+					simpleValue: true,
+					options: [
+						{ value: 'Two', label: 'Two' },
+						{ value: 'Three', label: 'Three' },
+						{ value: 'Twenty two', label: 'Twenty two' }
+					],
+				});
+			});
+			it('selects the focused option', () => {
+				clickArrowToOpen();
+				pressSpaceBar();
+				expect(onChange, 'was called with', 'Two');
+			});
+		});
+		describe('if searchable', () => {
+			beforeEach(() => {
+				instance = createControl({
+					searchable: true,
+					simpleValue: true,
+					options: [
+						{ value: 'Two', label: 'Two' },
+						{ value: 'Three', label: 'Three' },
+						{ value: 'Twenty two', label: 'Twenty two' }
+					],
+				});
+			});
+			it("doesn't select the focused option", () => {
+				typeSearchText('Twenty two');  // Matches label
+				pressSpaceBar();
+				expect(onChange, 'was not called');
+				// And the menu is still open
+				expect(ReactDOM.findDOMNode(instance), 'to contain no elements matching', DISPLAYED_SELECTION_SELECTOR);
+				expect(ReactDOM.findDOMNode(instance), 'queried for' , '.Select-option',
+					'to satisfy', [
+						expect.it('to have text', 'Twenty two')
+					]);
+			});
+		});
+	});
 });