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

src/Select.js

@@ -863,6 +863,7 @@ class Select extends React.Component {
 					matchPos: this.props.matchPos,
 					matchProp: this.props.matchProp,
 					valueKey: this.props.valueKey,
+					trimFilter: this.props.trimFilter
 				}
 			);
 		} else {
@@ -1107,6 +1108,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
@@ -1151,6 +1153,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

@@ -3478,6 +3478,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;