Fix issue with focusFirstSuggestion={true}. Closes #225.

moroshko · Aug 25, 2016 · 66ab560 · 66ab560
1 parent 9b94d63
commit 66ab560
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 12 deletions.
diff --git a/src/Autosuggest.js b/src/Autosuggest.js
@@ -54,10 +54,7 @@ class Autosuggest extends Component {
 
   componentWillReceiveProps(nextProps) {
     if (shallowEqualArrays(nextProps.suggestions, this.props.suggestions)) {
-      const suggestionsBecomeVisible =
-        !this.willRenderSuggestions(this.props) && this.willRenderSuggestions(nextProps);
-
-      if (suggestionsBecomeVisible) {
+      if (!this.justPressedUpDown) {
         this.maybeFocusFirstSuggestion();
       }
     } else {
@@ -335,7 +332,15 @@ class Autosuggest extends Component {
               updateFocusedSuggestion(newFocusedSectionIndex, newFocusedItemIndex, value);
               this.maybeCallOnChange(event, newValue, event.key === 'ArrowDown' ? 'down' : 'up');
             }
-            event.preventDefault();
+
+            event.preventDefault(); // Prevents the cursor from moving
+
+            this.justPressedUpDown = true;
+
+            setTimeout(() => {
+              this.justPressedUpDown = false;
+            });
+
             break;
 
           case 'Enter': {
@@ -363,6 +368,7 @@ class Autosuggest extends Component {
                 this.justSelectedSuggestion = false;
               });
             }
+
             break;
           }
 

diff --git a/test/focus-first-suggestion/AutosuggestApp.test.js b/test/focus-first-suggestion/AutosuggestApp.test.js
@@ -27,31 +27,44 @@ describe('Autosuggest with focusFirstSuggestion={true}', () => {
 
   describe('when typing and matches exist', () => {
     beforeEach(() => {
-      focusAndSetInputValue('p');
+      focusAndSetInputValue('j');
     });
 
     it('should focus on the first suggestion', () => {
-      expectFocusedSuggestion('Perl');
+      expectFocusedSuggestion('Java');
+    });
+
+    it('should focus on the first suggestion when typing a character does not change the suggestions', () => {
+      focusAndSetInputValue('ja');
+      expectFocusedSuggestion('Java');
     });
 
     it('should focus on the first suggestion when input is focused after it has been blurred', () => {
       blurInput();
       focusInput();
-      expectFocusedSuggestion('Perl');
+      expectFocusedSuggestion('Java');
     });
 
     it('should focus on the first suggestion when same suggestions are shown again', () => {
       setInputValue('');
-      setInputValue('p');
-      expectFocusedSuggestion('Perl');
+      setInputValue('j');
+      expectFocusedSuggestion('Java');
     });
   });
 
   describe('when pressing Down', () => {
+    beforeEach(() => {
+      focusAndSetInputValue('j');
+    });
+
     it('should focus on the second suggestion', () => {
-      focusAndSetInputValue('c');
       clickDown();
-      expectFocusedSuggestion('C#');
+      expectFocusedSuggestion('Javascript');
+    });
+
+    it('should not focus on any suggestion after reaching the last suggestion', () => {
+      clickDown(2);
+      expectFocusedSuggestion(null);
     });
   });
 

diff --git a/test/plain-list/AutosuggestApp.test.js b/test/plain-list/AutosuggestApp.test.js
@@ -23,6 +23,7 @@ import {
   clickEnter,
   clickDown,
   clickUp,
+  setInputValue,
   focusAndSetInputValue,
   isInputFocused,
   clearEvents,
@@ -138,6 +139,12 @@ describe('Default Autosuggest', () => {
       clickSuggestionsContainer();
       expect(isInputFocused()).to.equal(true);
     });
+
+    it('shoud clear the focused suggestion when input value changes', () => {
+      clickDown();
+      setInputValue('Per');
+      expectFocusedSuggestion(null);
+    });
   });
 
   describe('when typing and matches do not exist', () => {