Trim search text from beginning and the end. (fixes #1861)

src/Select.js

@@ -870,6 +870,7 @@ class Select extends React.Component {
 					matchPos: this.props.matchPos,
 					matchProp: this.props.matchProp,
 					valueKey: this.props.valueKey,
+					trimFilter: this.props.trimFilter
 				}
 			);
 		} else {
@@ -1116,6 +1117,7 @@ Select.propTypes = {
 	style: PropTypes.object,              // optional style to apply to the control
 	tabIndex: PropTypes.string,           // optional tab index of the control
 	tabSelectsValue: PropTypes.bool,      // whether to treat tabbing out while focused to be value selection
+	trimFilter: PropTypes.bool,           // whether to trim whitespace around filter value
 	value: PropTypes.any,                 // initial field value
 	valueComponent: PropTypes.func,       // value component to render
 	valueKey: PropTypes.string,           // path of the label value in option objects
@@ -1162,6 +1164,7 @@ Select.defaultProps = {
 	searchable: true,
 	simpleValue: false,
 	tabSelectsValue: true,
+ 	trimFilter: true,
 	valueComponent: Value,
 	valueKey: 'value',
 };

src/utils/defaultFilterOptions.js

@@ -1,4 +1,5 @@
 import stripDiacritics from './stripDiacritics';
+import trim from './trim';
 
 function filterOptions (options, filterValue, excludeOptions, props) {
 	if (props.ignoreAccents) {
@@ -9,6 +10,10 @@ function filterOptions (options, filterValue, excludeOptions, props) {
 		filterValue = filterValue.toLowerCase();
 	}
 
+	if (props.trimFilter) {
+		filterValue = trim(filterValue);
+	}
+
 	if (excludeOptions) excludeOptions = excludeOptions.map(i => i[props.valueKey]);
 
 	return options.filter(option => {
@@ -17,10 +22,12 @@ function filterOptions (options, filterValue, excludeOptions, props) {
 		if (!filterValue) return true;
 		var valueTest = String(option[props.valueKey]);
 		var labelTest = String(option[props.labelKey]);
+
 		if (props.ignoreAccents) {
 			if (props.matchProp !== 'label') valueTest = stripDiacritics(valueTest);
 			if (props.matchProp !== 'value') labelTest = stripDiacritics(labelTest);
 		}
+
 		if (props.ignoreCase) {
 			if (props.matchProp !== 'label') valueTest = valueTest.toLowerCase();
 			if (props.matchProp !== 'value') labelTest = labelTest.toLowerCase();

src/utils/trim.js

@@ -0,0 +1,10 @@
+module.exports = function trim(str) {
+    str = str.replace(/^\s+/, '');
+    for (var i = str.length - 1; i >= 0; i--) {
+        if (/\S/.test(str.charAt(i))) {
+            str = str.substring(0, i + 1);
+            break;
+        }
+    }
+    return str;
+};

test/Select-test.js

@@ -3500,6 +3500,42 @@ describe('Select', () => {
 			});
 		});
 
+		describe('with trimFilter=true', () => {
+			beforeEach(() => {
+
+				instance = createControl({
+					searchable: true,
+					trimFilter: true,
+					options: defaultOptions
+				});
+			});
+
+			it('finds options for a filter wrapped around with whitespaces', () => {
+
+				typeSearchText('  def  ');
+				var options = ReactDOM.findDOMNode(instance).querySelectorAll('.Select-option');
+				expect(options[0], 'to have text', 'AbcDef');
+				expect(options, 'to have length', 1);
+			});
+		});
+
+		describe('with trimFilter=false', () => {
+			beforeEach(() => {
+
+				instance = createControl({
+					searchable: true,
+					trimFilter: false,
+					options: defaultOptions
+				});
+			});
+
+			it('finds options for a filter wrapped around with whitespaces', () => {
+
+				typeSearchText('  def  ');
+				expect(ReactDOM.findDOMNode(instance), 'to contain no elements matching', '.Select-option');
+			});
+		});
+
 		describe('valueRenderer', () => {
 
 			var valueRenderer;