Fix #297

components/dropdown/Dropdown.js

@@ -80,6 +80,14 @@ const factory = (Input) => {
       touchend: this.handleDocumentClick
     });
 
+    open = () => {
+      const client = event.target.getBoundingClientRect();
+      const screenHeight = window.innerHeight || document.documentElement.offsetHeight;
+      const up = this.props.auto ? client.top > ((screenHeight / 2) + client.height) : false;
+      if (this.inputNode) this.inputNode.blur();
+      this.setState({active: true, up});
+    };
+
     close = () => {
       if (this.state.active) {
         this.setState({active: false});
@@ -93,14 +101,9 @@ const factory = (Input) => {
     };
 
     handleClick = (event) => {
+      this.open();
       events.pauseEvent(event);
-      const client = event.target.getBoundingClientRect();
-      const screen_height = window.innerHeight || document.documentElement.offsetHeight;
-      const up = this.props.auto ? client.top > ((screen_height / 2) + client.height) : false;
       if (this.props.onClick) this.props.onClick(event);
-      if (this.props.onFocus) this.props.onFocus(event);
-      if (this.inputNode) this.inputNode.blur();
-      this.setState({active: true, up});
     };
 
     handleSelect = (item, event) => {
@@ -110,7 +113,7 @@ const factory = (Input) => {
           event.target.name = this.props.name;
         }
         this.props.onChange(item, event);
-        this.setState({active: false});
+        this.close();
       }
     };
 
@@ -157,8 +160,23 @@ const factory = (Input) => {
       );
     };
 
+    handleFocus = event => {
+      event.stopPropagation();
+      if (!this.props.disabled) this.open();
+      if (this.props.onFocus) this.props.onFocus(event);
+    };
+
+    handleBlur = event => {
+      event.stopPropagation();
+      if (this.state.active) this.close();
+      if (this.props.onBlur) this.props.onBlur(event);
+    }
+
     render () {
-      const {template, theme, source, allowBlank, auto, required, ...others} = this.props; //eslint-disable-line no-unused-vars
+      const {
+        allowBlank, auto, required, onChange, onFocus, onBlur, //eslint-disable-line no-unused-vars
+        source, template, theme, ...others
+      } = this.props;
       const selected = this.getSelectedItem();
       const className = classnames(theme.dropdown, {
         [theme.up]: this.state.up,
@@ -168,9 +186,16 @@ const factory = (Input) => {
       }, this.props.className);
 
       return (
-        <div data-react-toolbox='dropdown' className={className}>
+        <div
+          className={className}
+          data-react-toolbox='dropdown'
+          onBlur={this.handleBlur}
+          onFocus={this.handleFocus}
+          tabIndex="0"
+        >
           <Input
             {...others}
+            tabIndex="-1"
             className={theme.value}
             onClick={this.handleClick}
             required={this.props.required}