You can select item with keyboards

components/autocomplete/index.cjsx

@@ -52,8 +52,17 @@ module.exports = React.createClass
     @setState focus: false if Object.keys(suggestions).length is 0
 
   onKeyPress: (event) ->
+    key_ascii = event.which
     query = @refs.input.getValue().trim()
-    if event.which is 13 and query isnt ""
+
+    if @state.focus
+      children = @refs.suggestions.getDOMNode().children
+      for child, index in children when child.classList.contains "active"
+        child.classList.remove "active"
+        query = child.getAttribute "id"
+        break
+
+    if key_ascii is 13 and query isnt ""
       for key, label of @state.suggestions when query.toLowerCase() is label.toLowerCase()
         suggestion = {"#{key}": label}
         break
@@ -62,22 +71,35 @@ module.exports = React.createClass
       else if suggestion
         @_addValue suggestion
 
+    else if @state.focus and key_ascii in [40, 38]
+      if key_ascii is 40
+        index = if index >= children.length - 1 then 0 else index + 1
+      else
+        index = if index is 0 then children.length - 1 else index - 1
+      children[index].classList.add "active"
+
   onBlur: (event) ->
     setTimeout (=> @setState focus: false, suggestions: {}), 300
 
   onSelect: (event) ->
     key = event.target.getAttribute "id"
     @_addValue {"#{key}": @state.suggestions[key]}
 
+  onRefreshSelection: (event) ->
+    children = @refs.suggestions.getDOMNode().children
+    for child, index in children when child.classList.contains "active"
+      child.classList.remove "active"
+      break
+
   onDelete: (event) ->
     delete @state.values[event.target.getAttribute "id"]
     @setState focus: false, values: @state.values
     @props.onChange? @
 
   # -- Render
   render: ->
-    <div data-component-autocomplete={@props.type}
-         className={"focus" if @state.focus}>
+    className = "focus" if @state.focus
+    <div data-component-autocomplete={@props.type} className={className}>
       { <label>{@props.label}</label> if @props.label }
       {
         if @props.multiple
@@ -88,9 +110,14 @@ module.exports = React.createClass
             }
           </ul>
       }
-      <Input {...@props} ref="input" value="" label="" onFocus={@onFocus}
-             onChange={@onChange} onKeyPress={@onKeyPress} onBlur={@onBlur}/>
-      <ul ref="suggestions" data-role="suggestions" onClick={@onSelect}>
+      <Input {...@props} ref="input" value="" label=""
+             onBlur={@onBlur}
+             onChange={@onChange}
+             onFocus={@onFocus}
+             onKeyDown={@onKeyPress}
+             />
+      <ul ref="suggestions" data-role="suggestions"
+        onClick={@onSelect} onMouseEnter={@onRefreshSelection}>
         {<li key={key} id={key}>{label}</li> for key, label of @state.suggestions}
       </ul>
     </div>

components/autocomplete/style.styl

@@ -2,13 +2,10 @@
 
 [data-component-autocomplete]
   position                                      : relative
-
-  // -- Children
   > label
     font-size                                   : FONT_SIZE_TINY
     color                                       : THEME
   > [data-role] > *
-    font-size                                   : FONT_SIZE_SMALL
     cursor                                      : pointer
   > [data-role="values"]
     > *
@@ -20,25 +17,30 @@
       background-color                          : THEME
       border-radius                             : (SPACE / 8)
   > [data-role="suggestions"]
-    z-index                                     : 10
+    z-index                                     : 2
     position                                    : absolute
     width                                       : 100%
+    height                                      : 0
+    max-height                                  : 50vh
     overflow-x                                  : hidden
     overflow-y                                  : scroll
-    max-height                                  : 0
     margin-top                                  : -(SPACE)
     background-color                            : WHITE
-    visibility                                  : hidden
-    box-shadow                                  : ZDEPTH_SHADOW_1
-    transition                                    max-height ANIMATION_DURATION ANIMATION_EASE
+    opacity                                     : 0
+    transform                                     translateY(-(INPUT_HEIGHT / 2))
+    transition-property                           height, box-shadow, opacity, transform
+    transition-duration                           ANIMATION_DURATION
+    transition-timing-function                    ANIMATION_EASE
     > *
       padding                                   : (SPACE / 2)
-      &:hover
+      &:hover, &.active
         color                                   : WHITE
-        background-color                        : THEME
+        background-color                        : FORM_ITEM_SELECT_BACKGROUND
 
   // -- Styles
   &.focus
     > [data-role="suggestions"]
-      max-height                                : 25vh
-      visibility                                : visible
+      height                      : auto
+      opacity                     : 1
+      transform                     translateY(0%)
+      box-shadow                    ZDEPTH_SHADOW_1

components/constants.styl

@@ -4,14 +4,19 @@
 COLOR                       = #222222
 BACKGROUND                  = #f5f5f5
 THEME                       = #cccccc
+THEME                       = #e91e63
 WHITE                       = #ffffff
 PRIMARY                     = #e91e63
+
 SECONDARY                   = #00bcd4
 SUCCESS                     = #259b24
 CANCEL                      = #e51c23
 WARNING                     = #ff9800
 FORM_COLOR                  = COLOR
 FORM_BORDER_COLOR           = lighten(FORM_COLOR, 75%)
+FORM_BORDER_COLOR_FOCUS     = THEME
+FORM_ITEM_SELECT            = THEME
+FORM_ITEM_SELECT_BACKGROUND = lighten(THEME, 75%)
 
 // -- Fonts
 FONT_FAMILY                 = "Roboto", "Helvetica Neue", "Helvetica", "sans-serif"