add focused className. Fixes react-component#72

eternalsky · Apr 8, 2016 · 32d1593 · 32d1593
1 parent 470287b
commit 32d1593
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 1 deletion.
diff --git a/assets/index.less b/assets/index.less
@@ -58,6 +58,11 @@
     border: 1px solid #d9d9d9;
   }
 
+  &-focused &-selection {
+    border-color: #23c0fa;
+    box-shadow: 0 0 2px fadeout(#2db7f5, 20%);
+  }
+
   &-enabled &-selection {
     &:hover {
       border-color: #23c0fa;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-select",
-  "version": "6.0.5",
+  "version": "6.0.6",
   "description": "React Select",
   "keywords": [
     "react",

diff --git a/src/Select.jsx b/src/Select.jsx
@@ -104,6 +104,7 @@ const Select = React.createClass({
       value,
       inputValue,
       open,
+      focused: false,
     };
   },
 
@@ -290,6 +291,18 @@ const Select = React.createClass({
     this.getInputDOMNode().focus();
   },
 
+  onOuterFocus() {
+    this.setState({
+      focused: true,
+    });
+  },
+
+  onOuterBlur() {
+    this.setState({
+      focused: false,
+    });
+  },
+
   onClearSelection(event) {
     const props = this.props;
     const state = this.state;
@@ -594,6 +607,7 @@ const Select = React.createClass({
       [className]: !!className,
       [prefixCls]: 1,
       [`${prefixCls}-open`]: open,
+      [`${prefixCls}-focused`]: open || this.state.focused,
       [`${prefixCls}-combobox`]: isCombobox(props),
       [`${prefixCls}-disabled`]: disabled,
       [`${prefixCls}-enabled`]: !disabled,
@@ -632,6 +646,8 @@ const Select = React.createClass({
       >
         <span
           style={props.style}
+          onBlur={this.onOuterBlur}
+          onFocus={this.onOuterFocus}
           className={classnames(rootCls)}
         >
           <span