     if @props.multiple
       values = @state.values
       values[key] = value[key]
+      @props.onChange? @
     else
       values = value
+      setTimeout (=> @props.onChange? @), 10
     @setState focus: false, values: values
     @refs.input.setValue if @props.multiple then "" else value[key]
-    @props.onChange? @
 
   _getSuggestions: (query) ->
     suggestions = {}

      else if suggestion
        @_addValue suggestion

  onSelect: (event) ->
    key = event.target.getAttribute "id"
    @_addValue {"#{key}": @state.suggestions[key]}

  # -- Render
  render: ->
    <div data-component-autocomplete={@props.type}
         className={"focus" if @state.focus}>
      {
        if @props.multiple
          <ul data-role="values" data-flex="horizontal wrap" onClick={@onDelete}>
            {
              for key, label of @state.values
                <li id={key} style={backgroundColor: @props.colors[key]}>{label}</li>
            }
          </ul>
      }
      <Input {...@props} value="" ref="input" onFocus={@onFocus}
             onChange={@onChange} onKeyPress={@onKeyPress} onBlur={@onBlur}/>
      <ul ref="suggestions" data-role="suggestions" onClick={@onSelect}>
        {<li id={key}>{label}</li> for key, label of @state.suggestions}
      </ul>
