From 808cdb81b61079f575118cbb2c7ad79b70ecc725 Mon Sep 17 00:00:00 2001
From: Ivan Diaz <ivan@opensupports.com>
Date: Sat, 23 Jan 2016 11:17:50 -0300
Subject: [PATCH] [Max Red] - Modify dropdown focus behaviour

---
 src/app/demo/components-demo-page.js |  2 +-
 src/core-components/drop-down.js     | 28 ++++++++++++++++++++++------
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/app/demo/components-demo-page.js b/src/app/demo/components-demo-page.js
index a4b6b979..2bb7e7bb 100644
--- a/src/app/demo/components-demo-page.js
+++ b/src/app/demo/components-demo-page.js
@@ -56,7 +56,7 @@ var DemoPage = React.createClass({
         {
             title: 'DropDown',
             render: (
-                <DropDown items={dropDownItems} />
+                <DropDown items={dropDownItems} onChange={function (index) { console.log('changed to ' + index); }} />
             )
         }
 	],
diff --git a/src/core-components/drop-down.js b/src/core-components/drop-down.js
index d1c74041..8bfa95de 100644
--- a/src/core-components/drop-down.js
+++ b/src/core-components/drop-down.js
@@ -51,7 +51,7 @@ var DropDown = React.createClass({
 
         return (
             <div className={this.getClass()}>
-                <div className="drop-down--current" onClick={this.getClickCallback(this.getSelectedIndex())}>
+                <div className="drop-down--current" onBlur={this.handleBlur} onClick={this.handleClick} tabIndex="0" ref="current">
                     {this.props.items[this.getSelectedIndex()]}
                 </div>
                 <Motion defaultStyle={animation.defaultStyle} style={animation.style}>
@@ -75,7 +75,7 @@ var DropDown = React.createClass({
 
     renderItem(item, index) {
         return (
-            <li className="drop-down--list-item" onClick={this.getClickCallback(index)}>
+            <li className="drop-down--list-item" onClick={this.handleItemClick.bind(this, index)} onMouseDown={this.handleItemMouseDown}>
                 {item.content}
             </li>
         );
@@ -91,15 +91,31 @@ var DropDown = React.createClass({
         return classNames(classes);
     },
 
-    getClickCallback(index) {
-        return callback(this.handleClick.bind(this, index), this.props.onChange, {index: index})
+    handleBlur() {
+        this.setState({
+            opened: false
+        });
     },
 
-    handleClick(index) {
+    handleClick() {
         this.setState({
-            opened: !this.state.opened,
+            opened: !this.state.opened
+        });
+    },
+
+    handleItemClick(index) {
+        this.setState({
+            opened: false,
             selectedIndex: index
         });
+
+        if (this.props.onChange) {
+            this.props.onChange(index);
+        }
+    },
+
+    handleItemMouseDown(event) {
+        event.preventDefault();
     },
 
     getSelectedIndex() {