           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

  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)

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