From 0e1a3677e8826248a09fec189af0fff2fa154b54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87a=C4=9Fatay=20=C3=87ivici?=
 <cagatay.civici@github.com>
Date: Wed, 6 Dec 2017 14:50:24 +0300
Subject: [PATCH] Navigation support for dropdown filter

---
 src/components/dropdown/Dropdown.js | 107 +++++++++++++++++-----------
 1 file changed, 67 insertions(+), 40 deletions(-)

diff --git a/src/components/dropdown/Dropdown.js b/src/components/dropdown/Dropdown.js
index 4339a10f24..ba7b935c17 100644
--- a/src/components/dropdown/Dropdown.js
+++ b/src/components/dropdown/Dropdown.js
@@ -126,49 +126,59 @@ export class Dropdown extends Component {
     onInputBlur(event) {
         DomHandler.removeClass(this.container, 'ui-state-focus');
     }
-    
-    onInputKeyDown(event) {
+
+    onUpKey(event) {
+        if (!this.panel.element.offsetParent && event.altKey) {
+            this.show();
+        }
+        else {
+            let selectedItemIndex = this.findOptionIndex(this.props.value);
+
+            if (selectedItemIndex !== -1) {
+                let nextItemIndex = selectedItemIndex + 1;
+                if (nextItemIndex !== (this.props.options.length)) {
+                    this.selectItem({
+                        originalEvent: event,
+                        option: this.props.options[nextItemIndex]
+                    });
+                }
+            }
+
+            if (selectedItemIndex === -1) {
+                this.selectItem({
+                    originalEvent: event,
+                    option: this.props.options[0]
+                });
+            }
+        }
+
+        event.preventDefault();
+    }
+
+    onDownKey(event) {
         let selectedItemIndex = this.findOptionIndex(this.props.value);
+        
+        if (selectedItemIndex > 0) {
+            let prevItemIndex = selectedItemIndex - 1;
+            this.selectItem({
+                originalEvent: event,
+                option: this.props.options[prevItemIndex]
+            });
+        }
 
+        event.preventDefault();
+    }
+    
+    onInputKeyDown(event) {
         switch(event.which) {
             //down
             case 40:
-                if(!this.panel.element.offsetParent && event.altKey) {
-                    this.show();
-                }
-                else {
-                    if(selectedItemIndex !== -1) {
-                        let nextItemIndex = selectedItemIndex + 1;
-                        if(nextItemIndex !== (this.props.options.length)) {
-                            this.selectItem({
-                                originalEvent: event,
-                                option: this.props.options[nextItemIndex]
-                            });
-                        }
-                    }
-                    
-                    if(selectedItemIndex === -1) {
-                        this.selectItem({
-                            originalEvent: event,
-                            option: this.props.options[0]
-                        });
-                    }                 
-                }
-                
-                event.preventDefault();
+                this.onUpKey(event);
             break;
             
             //up
             case 38:
-                if(selectedItemIndex > 0) {
-                    let prevItemIndex = selectedItemIndex - 1;                    
-                    this.selectItem({
-                        originalEvent: event,
-                        option: this.props.options[prevItemIndex]
-                    });
-                }
-                
-                event.preventDefault();
+                this.onDownKey(event);
             break;
 
             //space
@@ -195,7 +205,6 @@ export class Dropdown extends Component {
             
             default:
             break;
-        
         }
     }
     
@@ -228,8 +237,24 @@ export class Dropdown extends Component {
     }
     
     onFilterInputKeyDown(event) {
-        if(event.which === 13) {
-            event.preventDefault();
+        switch (event.which) {
+            //down
+            case 40:
+                this.onUpKey(event);
+                break;
+
+            //up
+            case 38:
+                this.onDownKey(event);
+                break;
+
+            //enter
+            case 13:
+                event.preventDefault();
+            break;
+
+            default:
+            break;
         }
     }
     
@@ -432,13 +457,15 @@ export class Dropdown extends Component {
     }
     
     componentDidUpdate(prevProps, prevState) {
-        if(this.props.filter) {
+        if (this.props.filter) {
             this.alignPanel();
         }
 
-        if(this.panel.element.offsetParent) {
+        if (this.panel.element.offsetParent) {
             let highlightItem = DomHandler.findSingle(this.panel.element, 'li.ui-state-highlight');
-            DomHandler.scrollInView(this.panel.itemsWrapper, highlightItem);
+            if (highlightItem) {
+                DomHandler.scrollInView(this.panel.itemsWrapper, highlightItem);
+            }
         } 
     }