 
               # A text input
               else
-                <Input type='text' onChange={@handleTextChange}
+                <StatefulInputText onChange={@handleTextChange}
+                  key={"text-#{level}-#{id}"}
                   {...options} />
          }
         </ListGroup>

RuleSelectorMenu = React.createClass
  getInitialState: ->
    nowMenuPath: ['_root']
    nowLastMenu: menuTree['_root']
    ruleValue: null
    applyEnabled: false
    errorText: null

  handleDropdownChange: (level, e) ->
    path = @state.nowMenuPath[0..level]
    path.push e.target.value
    totalDetails = accumulateMenu path
    @clearErrorText()
    @setState
      nowMenuPath: path
      nowLastMenu: totalDetails
      applyEnabled: totalDetails.value?
      ruleValue: totalDetails.value

  handleTextChange: (e) ->
    path = @state.nowMenuPath
    nowMenu = @state.nowLastMenu
    value = e.target.value
    @setState
      applyEnabled: !nowMenu.applyEnabledFunc? || nowMenu.applyEnabledFunc path, value
      ruleValue: value

  handleAddRule: ->
    path = @state.nowMenuPath.slice()
    menu = @state.nowLastMenu
    preprocess = menu.preprocess || ((path, value) -> value)
    value = cloneByJson(preprocess(path, @state.ruleValue))
    if menu.testError? && (errorText = menu.testError path, value)?
      @setState {errorText}
    else
      @props.onAddRule? path, value

  clearErrorText: ->
    @setState
      errorText: null

  render: ->
    <Panel collapsible defaultExpanded header={__ 'Filter'}>
      <form className='form-horizontal'>
        <ListGroup fill>

      show: false
      text: null
    @props.onDismiss?()

StatefulInputText = React.createClass
  getInitialState: ->
    text: ''

  onChange: (e) ->
    @props.onChange? e.target.value
    @setState
      text: e.target.value

  render: ->
    props = @props
    <Input type='text' value={@state.text} {...props} onChange={@onChange}/>
  

# This function is written totally based on unit test. See comments after it.
parseTimeMenu = (path, value) ->
