From c8892b48957838abc302af92c78d494fe00f20d5 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Mon, 10 Jul 2017 14:25:05 +0300
Subject: [PATCH] Fixed #39

---
 src/components/dropdown/Dropdown.js | 95 ++++++++++++++++++++++++++++-
 1 file changed, 93 insertions(+), 2 deletions(-)

diff --git a/src/components/dropdown/Dropdown.js b/src/components/dropdown/Dropdown.js
index bf11beb3e0..bfd72f69df 100644
--- a/src/components/dropdown/Dropdown.js
+++ b/src/components/dropdown/Dropdown.js
@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import DomHandler from '../utils/DomHandler';
+import ObjectUtils from '../utils/ObjectUtils';
 import classNames from 'classnames';
 
 export class Dropdown extends Component {
@@ -61,8 +62,10 @@ export class Dropdown extends Component {
 
     onOptionClick(event, option, index) {
         this.optionClick = true;
+        this.highlightOption = option;
         this.selectItem(event, option, index);           
         this.hide();
+        this.input.focus();
         event.preventDefault();
     }
 
@@ -84,6 +87,7 @@ export class Dropdown extends Component {
         this.selfClick = true;
 
         if(!this.optionClick) {
+            this.input.focus();
             if(this.panel.offsetParent)
                 this.hide();
             else
@@ -126,6 +130,93 @@ export class Dropdown extends Component {
         this.setState({focus: false});
     }
 
+    findOptionIndex(option) {
+        let index = 0;
+        if(this.props.options) {
+            for(let i = 0; i < this.props.options.length; i++) {
+                if(ObjectUtils.equals(option, this.props.options[i])) {
+                    index = i;
+                    break;
+                }
+            }
+        }
+        return index;
+    }
+
+    onKeydown(event) {
+        let highlightItemIndex = this.highlightOption ? this.findOptionIndex(this.highlightOption) : 0;
+
+        switch(event.which) {
+            //down
+            case 40:
+                if( event.altKey ){
+                    this.show();
+                }
+                else{
+                    if (highlightItemIndex !== -1) {
+                        var nextItemIndex = highlightItemIndex + 1;
+                        if (nextItemIndex !== (this.props.options.length)) {
+                            this.highlightOption = this.props.options[nextItemIndex];
+                            this.highlightOptionChanged = true;
+                        }
+
+                        this.selectItem(event, this.highlightOption);
+                    }
+                    else {
+                        this.highlightOption = this.props.options[0];
+                    }
+                }
+                event.preventDefault();
+                break;
+
+            //up
+            case 38:
+                if(highlightItemIndex > 0) {
+                    let prevItemIndex = highlightItemIndex - 1;
+                    this.highlightOption = this.props.options[prevItemIndex];
+                    this.highlightOptionChanged = true;
+                    this.selectItem(event, this.highlightOption);
+                }
+
+                event.preventDefault();
+                break;
+
+            //enter
+            case 13:
+                if(this.highlightOption) {
+                    this.selectItem(event, this.highlightOption);
+                    this.hide();
+                }
+                event.preventDefault();
+                break;
+
+            //escape
+            case 27:
+                this.hide();
+                event.preventDefault();
+                break;
+
+            //space
+            case 32:
+                if(this.panel.style.display==='block') {
+                    if (this.highlightOption) {
+                        this.selectItem(event, this.highlightOption);
+                        this.hide();
+                    }
+                }
+                else{
+                    this.show();
+                }
+                event.preventDefault();
+                break;
+
+            default:
+                break;
+
+        }
+        this.setState({highlightOption: this.highlightOption});
+    }
+
     render() {
         var styleClass = classNames('ui-dropdown ui-widget ui-state-default ui-corner-all', this.props.className, {
             'ui-state-disabled': this.props.disabled,
@@ -139,7 +230,7 @@ export class Dropdown extends Component {
         if(this.props.options) {
             listItems = this.props.options.map((option, index) => {
                     var listItemContent = this.props.itemTemplate ? this.props.itemTemplate(option) : option.label;
-                    var selected = (this.props.value != null && this.props.value === option.value) || (this.props.value == null && index === 0);
+                    var selected = (this.props.value != null && this.props.value === option.value) || (this.props.value == null && index === 0) || this.state.highlightOption === option;
                     var listItemStyleClass = classNames('ui-dropdown-item ui-corner-all', {'ui-state-highlight': selected});
                     var listItem = <li className={listItemStyleClass} key={option.value}
                                 onClick={(event) => this.onOptionClick(event, option)}>
@@ -160,7 +251,7 @@ export class Dropdown extends Component {
                     <select tabIndex="-1" ref={(el) => {this.selectElement = el;}}>{optionElements}</select>
                 </div>
                 <div className="ui-helper-hidden-accessible">
-                    <input readOnly type="text" onFocus={this.onInputFocus.bind(this)} onBlur={this.onInputBlur.bind(this)}/>
+                    <input readOnly ref={(el) => {this.input = el;}} type="text" onFocus={this.onInputFocus.bind(this)} onKeyDown={this.onKeydown.bind(this)} onBlur={this.onInputBlur.bind(this)}/>
                 </div>
                 <label className="ui-dropdown-label ui-inputtext ui-corner-all">{label}</label>
                 <div className="ui-dropdown-trigger ui-state-default ui-corner-right">