Avoid mutating user input when ignoring case/accents (fixes JedWatson#1352)

Previously, when the ignoreCase or ignoreAccents options were set to true in an Async select, the visible user input would be transformed (e.g. it would appear all lowercase even when the user was typing capital letters). This commit updates the component to transform the input internally without changing the input value itself.

Author: not-an-aardvark

src/Async.js

@@ -131,26 +131,28 @@ export default class Async extends Component {
 				isLoading: true
 			});
 		}
-
-		return inputValue;
 	}
 
 	_onInputChange (inputValue) {
 		const { ignoreAccents, ignoreCase, onInputChange } = this.props;
+		let transformedInputValue = inputValue;
 
 		if (ignoreAccents) {
-			inputValue = stripDiacritics(inputValue);
+			transformedInputValue = stripDiacritics(transformedInputValue);
 		}
 
 		if (ignoreCase) {
-			inputValue = inputValue.toLowerCase();
+			transformedInputValue = transformedInputValue.toLowerCase();
 		}
 
 		if (onInputChange) {
-			onInputChange(inputValue);
+			onInputChange(transformedInputValue);
 		}
 
-		return this.loadOptions(inputValue);
+		this.loadOptions(transformedInputValue);
+
+		// Return the original input value to avoid modifying the user's view of the input while typing.
+		return inputValue;
 	}
 
 	inputValue() {

test/Async-test.js

@@ -319,6 +319,15 @@ describe('Async', () => {
 			typeSearchText('WÄRE');
 			expect(loadOptions, 'was called with', 'WÄRE');
 		});
+
+		it('does not mutate the user input', () => {
+			createControl({
+				ignoreAccents: false,
+				ignoreCase: true
+			});
+			typeSearchText('A');
+			expect(asyncNode.textContent, 'to begin with', 'A');
+		});
 	});
 
 	describe('with ignore case and ignore accents', () => {