Fixes sticky suggestions for touch devices

package.json

@@ -127,10 +127,10 @@
     "react-component"
   ],
   "nyc": {
-    "statements": 95,
+    "statements": 94,
     "branches": 91,
     "functions": 100,
-    "lines": 95,
+    "lines": 94,
     "include": [
       "src/*.js"
     ],

src/Autosuggest.js

@@ -108,13 +108,17 @@ export default class Autosuggest extends Component {
     };
 
     this.justPressedUpDown = false;
+    this.isMouseDown = false;
   }
 
   componentDidMount() {
     document.addEventListener('mousedown', this.onDocumentMouseDown);
+    document.addEventListener('mouseup', this.onDocumentMouseUp);
 
     this.input = this.autowhatever.input;
     this.suggestionsContainer = this.autowhatever.itemsContainer;
+    this.suggestionsContainer.addEventListener('mousedown', this.onSuggestionsContainerMouseDown);
+    this.suggestionsContainer.addEventListener('mouseleave', this.onSuggestionsContainerMouseLeave);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -162,6 +166,9 @@ export default class Autosuggest extends Component {
 
   componentWillUnmount() {
     document.removeEventListener('mousedown', this.onDocumentMouseDown);
+    document.removeEventListener('mouseup', this.onDocumentMouseUp);
+    this.suggestionsContainer.removeEventListener('mousedown', this.onSuggestionsContainerMouseDown);
+    this.suggestionsContainer.removeEventListener('mouseleave', this.onSuggestionsContainerMouseLeave);
   }
 
   updateHighlightedSuggestion(sectionIndex, suggestionIndex, prevValue) {
@@ -281,6 +288,21 @@ export default class Autosuggest extends Component {
     }
   };
 
+  onDocumentMouseUp = () => {
+    this.isMouseDown = false;
+  };
+
+  onSuggestionsContainerMouseDown = () => {
+    this.isMouseDown = true;
+  };
+
+  onSuggestionsContainerMouseLeave = () => {
+    if (this.isMouseDown) {
+      this.justSelectedSuggestion = false;
+      this.input.focus();
+    }
+  };
+
   findSuggestionElement(startNode) {
     let node = startNode;
 
@@ -329,6 +351,10 @@ export default class Autosuggest extends Component {
     this.justSelectedSuggestion = true;
   };
 
+  onSuggestionTouchEnd = () => {
+    this.justSelectedSuggestion = false;
+  };
+
   onSuggestionsClearRequested = () => {
     const { onSuggestionsClearRequested } = this.props;
 
@@ -419,6 +445,7 @@ export default class Autosuggest extends Component {
       onMouseLeave: this.resetHighlightedSuggestionOnMouseLeave,
       onMouseDown: this.onSuggestionMouseDown,
       onTouchStart: this.onSuggestionMouseDown, // Because on iOS `onMouseDown` is not triggered
+      onTouchEnd: this.onSuggestionTouchEnd,
       onClick: this.onSuggestionClick
     };
   };

test/helpers.js

@@ -156,6 +156,10 @@ export const expectHighlightedSuggestion = suggestion => {
   }
 };
 
+export const getIsMouseDown = () => {
+  return app.autosuggest.isMouseDown;
+}
+
 export const mouseEnterSuggestion = suggestionIndex => {
   Simulate.mouseEnter(getSuggestion(suggestionIndex));
 };
@@ -179,6 +183,34 @@ const mouseDownDocument = target => {
   );
 };
 
+export const mouseUpDocument = () => {
+  document.dispatchEvent(
+    new window.CustomEvent('mouseup')
+  );
+};
+
+export const mouseDownSuggestionsContainer = () => {
+  suggestionsContainer.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
+      }
+    })
+  );
+};
+
+const mouseLeaveSuggestionsContainer = () => {
+  suggestionsContainer.dispatchEvent(
+    new window.CustomEvent('mouseleave', {
+      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
+      }
+    })
+  );
+};
+
 // It doesn't feel right to emulate all the DOM events by copying the implementation.
 // Please show me a better way to emulate this.
 export const clickSuggestion = suggestionIndex => {
@@ -199,6 +231,16 @@ export const clickSuggestionsContainer = () => {
   focusInput();
 };
 
+export const clickSuggestionAndMoveOutsideContainer = () => {
+  mouseDownSuggestionsContainer();
+  mouseLeaveSuggestionsContainer();
+};
+
+export const moveMouseOutsideContainer = () => {
+  blurInput();
+  mouseLeaveSuggestionsContainer();
+};
+
 export const focusInput = () => {
   Simulate.focus(input);
 };

test/plain-list/AutosuggestApp.js

@@ -84,6 +84,7 @@ export default class AutosuggestApp extends Component {
 
   storeAutosuggestReference = autosuggest => {
     if (autosuggest !== null) {
+      this.autosuggest = autosuggest;
       this.input = autosuggest.input;
     }
   };

test/plain-list/AutosuggestApp.test.js

@@ -15,8 +15,13 @@ import {
   getSuggestionsContainerAttribute,
   mouseEnterSuggestion,
   mouseLeaveSuggestion,
+  mouseUpDocument,
+  mouseDownSuggestionsContainer,
+  getIsMouseDown,
   clickSuggestion,
   clickSuggestionsContainer,
+  clickSuggestionAndMoveOutsideContainer,
+  moveMouseOutsideContainer,
   focusInput,
   blurInput,
   clickEscape,
@@ -142,6 +147,26 @@ describe('Default Autosuggest', () => {
       expect(isInputFocused()).to.equal(true);
     });
 
+    it('should keep the focus on input when a suggestion is clicked and dragged', () => {
+      clickSuggestionAndMoveOutsideContainer();
+      expect(isInputFocused()).to.equal(true);
+    });
+
+    it('should not change the focus on input when mouse leaves the container without mouse down', () => {
+      moveMouseOutsideContainer();
+      expect(isInputFocused()).to.equal(false);
+    });
+
+    it('should set isMouseDown to true when mouseDown event is dispatched on the suggestion container', () => {
+      mouseDownSuggestionsContainer();
+      expect(getIsMouseDown()).to.equal(true);
+    });
+
+    it('should set isMouseDown to false when mouseUp event is dispatched on the document', () => {
+      mouseUpDocument();
+      expect(getIsMouseDown()).to.equal(false);
+    });
+
     it('shoud reset the highlighted suggestion when input value changes', () => {
       clickDown();
       setInputValue('Per');