 
         commands =
             'core:move-up' : (event) =>
-                if @input? and @input?.candidateSymbols.length isnt 0
+                if @candidateSymbols?.length isnt 0
                     @moveUp()
                     @replaceSymbol @selected[0]
                     event.stopImmediatePropagation()
             'core:move-right' : (event) =>
-                if @input? and @input?.candidateSymbols.length isnt 0
+                if @candidateSymbols?.length isnt 0
                     @moveRight()
                     @replaceSymbol @selected[0]
                     event.stopImmediatePropagation()
             'core:move-down' : (event) =>
-                if @input? and @input?.candidateSymbols.length isnt 0
+                if @candidateSymbols?.length isnt 0
                     @moveDown()
                     @replaceSymbol @selected[0]
                     event.stopImmediatePropagation()
             'core:move-left' : (event) =>
-                if @input? and @input?.candidateSymbols.length isnt 0
+                if @candidateSymbols?.length isnt 0
                     @moveLeft()
                     @replaceSymbol @selected[0]
                     event.stopImmediatePropagation()

    destroy: ->
        @subscriptions.destroy()
    data: ->
        subscriptions: new CompositeDisposable
        index: 0
    methods:

    props: ['input']
    template: '''
        <div>
            <div id="input-buffer" class="inline-block">{{rawInput}}</div>
            <div id="suggestion-keys" class="btn-group btn-group-sm">
                <button class="btn" v-repeat="suggestionKeys" v-on="click: selectKey($value)">{{$value}}</button>
            </div>
            <div id="candidate-symbols" class="btn-group btn-group-sm">
                <button class="btn" v-repeat="selectedLeft" v-on="click: selectSymbol($value)">{{$value}}</button>
