           R.input
             type:        'text'
             className:   'form-control'
-            ref:         'category'  # for autocompletion
+            ref:         'category'  # for Autocomplete to access the DOM
             name:        'category'  # for @handleChange
             placeholder: 'Category'
             value:       @state.category

          R.input
            type:        'text'
            className:   'form-control'
            ref:         'room'  # for autocompletion
            name:        'room'  # for @handleChange
            placeholder: 'Room'
            value:       @state.room

  handleClear: (e) ->
    @setState @getInitialState()  # Restore component's initial UI.

  # Field validations
  valid: ->
    @validName() && @validVolume() && @validQuantity() &&
    @validRoom() && @validCategory() && @validDescription()
  validName:        -> @state.name && @state.name.length <= 50
  validVolume:      -> @state.volume && @state.volume.length <= 10
  validQuantity:    -> @state.quantity && @state.quantity.length <= 10
  validRoom:        -> @state.room && @state.room.length <= 50
  validCategory:    -> @state.category && @state.category.length <= 50
  validDescription: -> @state.description.length <= 200
  fieldColor: (validator) -> if validator then 'has-success' else 'has-warning'

  capitalize: (string) ->
    string.charAt(0).toUpperCase() + string.slice(1)
