Amend tests and move onInputChange call

onInputChange is now called from `handleInputChange`, which is less
surprising than `componentDidUpdate`, and should stop the double render,
and hence the flash of typed content, as opposed to what is returned
from `onInputChange`.

Simplified the tests by using the existing `createComponentWithWrapper`
function, and using a stub. This should make the tests clearer.
Added a couple of tests for returning different things (e.g. null,
numbers), and one to check the new value is actually rendered in the
DOM.

Author: bruderstein

src/Select.js

@@ -171,13 +171,6 @@ const Select = React.createClass({
 			this.hasScrolledToOption = false;
 		}
 
-		if (prevState.inputValue !== this.state.inputValue && this.props.onInputChange) {
-			var nextState = this.props.onInputChange(this.state.inputValue);
-			var newInput = (nextState !== undefined) ? nextState : null;
-			if (newInput !== null) {
-				this.setState({ inputValue: newInput });
-			}
-		}
 		if (this._scrollToFocusedOptionOnUpdate && this.refs.focused && this.refs.menu) {
 			this._scrollToFocusedOptionOnUpdate = false;
 			var focusedDOM = ReactDOM.findDOMNode(this.refs.focused);
@@ -347,10 +340,18 @@ const Select = React.createClass({
 	},
 
 	handleInputChange (event) {
+		let newInputValue = event.target.value;
+		if (this.state.inputValue !== event.target.value && this.props.onInputChange) {
+			let nextState = this.props.onInputChange(newInputValue);
+			// Note: != used deliberately here to catch undefined and null
+			if (nextState != null) {
+				newInputValue = '' + nextState;
+			}
+		}
 		this.setState({
 			isOpen: true,
 			isPseudoFocused: false,
-			inputValue: event.target.value,
+			inputValue: newInputValue
 		});
 	},
 

test/Select-test.js

@@ -127,31 +127,6 @@ describe('Select', () => {
 
 	};
 
-	var createControlWithChange = (props, options) => {
-
-		options = options || {};
-
-		onChange = sinon.spy();
-		onInputChange = sinon.spy(function(inputValue) {
-			if (inputValue === '1') {
-				return '2';
-			}
-		});
-		// Render an instance of the component
-		instance = TestUtils.renderIntoDocument(
-			<Select
-				onChange={onChange}
-				onInputChange={onInputChange}
-				{...props}
-				/>
-		);
-		if (options.initialFocus !== false) {
-			findAndFocusInputControl();
-		}
-		return instance;
-
-	};
-
 	var setValueProp = value => wrapper.setPropsForChild({ value });
 
 	var createControlWithWrapper = (props, options) => {
@@ -408,30 +383,56 @@ describe('Select', () => {
 	});
 
 	describe('with a return from onInputChange', () => {
+
+		let onInputChangeOverride;
 		beforeEach(() => {
 			options = [
 				{ value: 'one', label: 'One' },
 				{ value: 'two', label: 'Two' },
 				{ value: 'three', label: 'Three' }
 			];
 
-			instance = createControlWithChange({
+			onInputChangeOverride = sinon.stub();
+
+			wrapper = createControlWithWrapper({
 				name: 'field-onChange',
 				value: 'one',
 				options: options,
 				simpleValue: true,
+				onInputChange: onInputChangeOverride
 			});
 		});
 
 		it('should change the value when onInputChange returns a value', () => {
+			onInputChangeOverride.returns('2');
 			typeSearchText('1');
 			expect(instance.state.inputValue, 'to equal', '2');
 		});
 
-		it('should return the input when onInputChange does not return a value', () => {
+		it('should return the input when onInputChange returns undefined', () => {
+			onInputChangeOverride.returns(undefined);  // Not actually necessary as undefined is the default, but makes this clear
 			typeSearchText('Test');
 			expect(instance.state.inputValue, 'to equal', 'Test');
 		});
+
+		it('should return the input when onInputChange returns null', () => {
+			onInputChangeOverride.returns(null);
+			typeSearchText('Test');
+			expect(instance.state.inputValue, 'to equal', 'Test');
+		});
+
+		it('should update the input when onInputChange returns a number', () => {
+			onInputChangeOverride.returns(5);
+			typeSearchText('Test');
+			expect(instance.state.inputValue, 'to equal', '5');
+		});
+
+		it('displays the new value in the input box', () => {
+			onInputChangeOverride.returns('foo');
+			typeSearchText('Test');
+			const displayedValue = ReactDOM.findDOMNode(instance).querySelector('.Select-input input').value;
+			expect(displayedValue, 'to equal', 'foo');
+		});
 	});
 
 	describe('with values as numbers', () => {