Fix scrollbar issue in IE. Closes #190.

demo/src/components/App/components/Examples/components/Basic/autosuggest.css

@@ -17,6 +17,10 @@
   outline: none;
 }
 
+.react-autosuggest__input::-ms-clear {
+  display: none;
+}
+
 .react-autosuggest__container--open .react-autosuggest__input {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;

demo/src/components/App/components/Examples/components/CustomRender/theme.less

@@ -19,6 +19,10 @@
     outline: none;
   }
 
+  &::-ms-clear {
+    display: none;
+  }
+
   .containerOpen & {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;

demo/src/components/App/components/Examples/components/MultipleSections/theme.less

@@ -20,6 +20,10 @@
     outline: none;
   }
 
+  &::-ms-clear {
+    display: none;
+  }
+
   .containerOpen & {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;

demo/src/components/App/components/Header/redux.js

@@ -3,7 +3,7 @@ import fetch from 'isomorphic-fetch';
 const UPDATE_STARGAZERS = 'UPDATE_STARGAZERS';
 
 const initialState = {
-  stargazers: '1061'
+  stargazers: '1073'
 };
 
 export function loadStargazers() {

demo/standalone/app.css

@@ -17,6 +17,10 @@
   outline: none;
 }
 
+.react-autosuggest__input::-ms-clear {
+  display: none;
+}
+
 .react-autosuggest__container--open .react-autosuggest__input {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;

package.json

@@ -54,7 +54,7 @@
     "happypack": "^2.0.4",
     "ismobilejs": "^0.4.0",
     "isomorphic-fetch": "^2.2.1",
-    "jsdom": "^9.0.0",
+    "jsdom": "^9.4.2",
     "less": "^2.6.1",
     "less-loader": "^2.2.3",
     "mocha": "^2.4.5",

src/Autosuggest.js

@@ -53,14 +53,19 @@ class Autosuggest extends Component {
   constructor() {
     super();
 
-    this.storeInputReference = this.storeInputReference.bind(this);
+    this.storeReferences = this.storeReferences.bind(this);
+    this.onDocumentMouseDown = this.onDocumentMouseDown.bind(this);
     this.onSuggestionMouseEnter = this.onSuggestionMouseEnter.bind(this);
     this.onSuggestionMouseLeave = this.onSuggestionMouseLeave.bind(this);
     this.onSuggestionMouseDown = this.onSuggestionMouseDown.bind(this);
     this.onSuggestionClick = this.onSuggestionClick.bind(this);
     this.itemProps = this.itemProps.bind(this);
   }
 
+  componentDidMount() {
+    document.addEventListener('mousedown', this.onDocumentMouseDown);
+  }
+
   componentWillReceiveProps(nextProps) {
     if (shallowEqualArrays(nextProps.suggestions, this.props.suggestions)) {
       const suggestionsBecomeVisible =
@@ -82,6 +87,10 @@ class Autosuggest extends Component {
     }
   }
 
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.onDocumentMouseDown);
+  }
+
   getSuggestion(sectionIndex, suggestionIndex) {
     const { suggestions, multiSection, getSectionSuggestions } = this.props;
 
@@ -118,6 +127,23 @@ class Autosuggest extends Component {
     };
   }
 
+  onDocumentMouseDown(event) {
+    this.justClickedOnSuggestionsContainer = false;
+
+    let node =
+      event.detail.target || // This is for testing only. Please show be a better way to emulate this.
+      event.target;
+
+    do {
+      if (node === this.suggestionsContainer) {
+        this.justClickedOnSuggestionsContainer = true;
+        return;
+      }
+
+      node = node.parentNode;
+    } while (node !== null);
+  }
+
   findSuggestionElement(startNode) {
     let node = startNode;
 
@@ -164,12 +190,14 @@ class Autosuggest extends Component {
     return suggestions.length > 0 && shouldRenderSuggestions(value);
   }
 
-  storeInputReference(autowhatever) {
+  storeReferences(autowhatever) {
     if (autowhatever !== null) {
-      const input = autowhatever.input;
+      const { input } = autowhatever;
 
       this.input = input;
       this.props.inputRef(input);
+
+      this.suggestionsContainer = autowhatever.itemsContainer;
     }
   }
 
@@ -247,7 +275,7 @@ class Autosuggest extends Component {
     const autowhateverInputProps = {
       ...inputProps,
       onFocus: event => {
-        if (!this.justClickedOnSuggestion) {
+        if (!this.justClickedOnSuggestion && !this.justClickedOnSuggestionsContainer) {
           inputFocused(shouldRenderSuggestions(value));
           onFocus && onFocus(event);
 
@@ -257,6 +285,11 @@ class Autosuggest extends Component {
         }
       },
       onBlur: event => {
+        if (this.justClickedOnSuggestionsContainer) {
+          this.input.focus();
+          return;
+        }
+
         this.onBlurEvent = event;
 
         if (!this.justClickedOnSuggestion) {
@@ -376,7 +409,7 @@ class Autosuggest extends Component {
         itemProps={this.itemProps}
         theme={theme}
         id={id}
-        ref={this.storeInputReference} />
+        ref={this.storeReferences} />
     );
   }
 }

test/helpers.js

@@ -6,7 +6,7 @@ import TestUtils, { Simulate } from 'react-addons-test-utils';
 
 chai.use(sinonChai);
 
-let app, container, input;
+let app, container, input, suggestionsContainer;
 let eventsArray = [];
 
 export const clearEvents = () => {
@@ -25,6 +25,7 @@ export const init = application => {
   app = application;
   container = TestUtils.findRenderedDOMComponentWithClass(app, 'react-autosuggest__container');
   input = TestUtils.findRenderedDOMComponentWithTag(app, 'input');
+  suggestionsContainer = TestUtils.findRenderedDOMComponentWithClass(app, 'react-autosuggest__suggestions-container');
 };
 
 export const eventInstance = sinon.match.instanceOf(SyntheticEvent);
@@ -48,18 +49,14 @@ export function expectInputAttribute(attributeName, expectedValue) {
   expect(input.getAttribute(attributeName)).to.equal(expectedValue);
 }
 
-export function expectSuggestionsContainerAttribute(attributeName, expectedValue) {
-  expect(getSuggestionsContainer().getAttribute(attributeName)).to.equal(expectedValue);
+export function getSuggestionsContainerAttribute(attributeName) {
+  return suggestionsContainer.getAttribute(attributeName);
 }
 
 export function expectInputValue(expectedValue) {
   expect(input.value).to.equal(expectedValue);
 }
 
-export function getSuggestionsContainer() {
-  return TestUtils.findRenderedDOMComponentWithClass(app, 'react-autosuggest__suggestions-container');
-}
-
 export function getSuggestionsList() {
   return TestUtils.findRenderedDOMComponentWithClass(app, 'react-autosuggest__suggestions-list');
 }
@@ -133,6 +130,16 @@ export function clickSuggestion(suggestionIndex) {
   Simulate.click(getSuggestion(suggestionIndex));
 }
 
+export function clickSuggestionsContainer() {
+  document.dispatchEvent(new window.CustomEvent('mousedown', {
+    detail: { // must be 'detail' accoring to docs: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events#Adding_custom_data_–_CustomEvent()
+      target: suggestionsContainer
+    }
+  }));
+  blurInput();
+  focusInput();
+}
+
 export function focusInput() {
   Simulate.focus(input);
 }
@@ -172,5 +179,5 @@ export function focusAndSetInputValue(value) {
 }
 
 export function isInputFocused() {
-  return global.document.activeElement === input;
+  return document.activeElement === input;
 }

test/multi-section/AutosuggestApp.test.js

@@ -10,7 +10,7 @@ import {
   expectInputAttribute,
   expectSuggestions,
   expectFocusedSuggestion,
-  expectSuggestionsContainerAttribute,
+  getSuggestionsContainerAttribute,
   getTitle,
   clickSuggestion,
   focusInput,
@@ -188,7 +188,7 @@ describe('Autosuggest with multiSection={true}', () => {
 
     it('should set suggestions container class', () => {
       focusAndSetInputValue('e');
-      expectSuggestionsContainerAttribute('class', 'react-autosuggest__suggestions-container');
+      expect(getSuggestionsContainerAttribute('class')).to.equal('react-autosuggest__suggestions-container');
     });
   });
 

test/plain-list/AutosuggestApp.js

@@ -38,6 +38,7 @@ export const onChange = sinon.spy((event, { newValue }) => {
   });
 });
 
+export const onFocus = sinon.spy();
 export const onBlur = sinon.spy();
 export const onSuggestionSelected = sinon.spy(() => {
   addEvent('onSuggestionSelected');
@@ -81,6 +82,7 @@ export default class AutosuggestApp extends Component {
       type: 'search',
       value,
       onChange,
+      onFocus,
       onBlur
     };
 

test/plain-list/AutosuggestApp.test.js

@@ -7,15 +7,16 @@ import {
   getInnerHTML,
   expectInputAttribute,
   expectInputValue,
-  getSuggestionsContainer,
   getSuggestionsList,
   getSuggestion,
   expectInputReferenceToBeSet,
   expectSuggestions,
   expectFocusedSuggestion,
+  getSuggestionsContainerAttribute,
   mouseEnterSuggestion,
   mouseLeaveSuggestion,
   clickSuggestion,
+  clickSuggestionsContainer,
   focusInput,
   blurInput,
   clickEscape,
@@ -31,6 +32,7 @@ import AutosuggestApp, {
   getSuggestionValue,
   renderSuggestion,
   onChange,
+  onFocus,
   onBlur,
   shouldRenderSuggestions,
   onSuggestionSelected,
@@ -131,6 +133,11 @@ describe('Default Autosuggest', () => {
       mouseLeaveSuggestion(2);
       expectFocusedSuggestion(null);
     });
+
+    it('should keep the focus on input when suggestions container is clicked', () => {
+      clickSuggestionsContainer();
+      expect(isInputFocused()).to.equal(true);
+    });
   });
 
   describe('when typing and matches do not exist', () => {
@@ -468,6 +475,30 @@ describe('Default Autosuggest', () => {
     });
   });
 
+  describe('inputProps.onFocus', () => {
+    beforeEach(() => {
+      focusAndSetInputValue('c');
+      onFocus.reset();
+    });
+
+    it('should not call onFocus when suggestions container is clicked', () => {
+      clickSuggestionsContainer();
+      expect(onFocus).not.to.have.been.called;
+    });
+  });
+
+  describe('inputProps.onBlur', () => {
+    beforeEach(() => {
+      focusAndSetInputValue('c');
+      onBlur.reset();
+    });
+
+    it('should not call onBlur when suggestions container is clicked', () => {
+      clickSuggestionsContainer();
+      expect(onBlur).not.to.have.been.called;
+    });
+  });
+
   describe('shouldRenderSuggestions', () => {
     beforeEach(() => {
       shouldRenderSuggestions.reset();
@@ -695,7 +726,7 @@ describe('Default Autosuggest', () => {
       });
 
       it('input\'s aria-owns should be equal to suggestions container id', () => {
-        expectInputAttribute('aria-owns', getSuggestionsContainer().id);
+        expectInputAttribute('aria-owns', getSuggestionsContainerAttribute('id'));
       });
 
       it('input\'s aria-activedescendant should be equal to the focused suggestion id when using keyboard', () => {