 
         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()

    props: ['input']
    template: '''
        <div>
            <div id="input-buffer" class="inline-block">{{input.rawInput}}</div>
            <div id="suggestion-keys" class="btn-group btn-group-sm">
                <button class="btn" v-repeat="input.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>

            if (@index - 10) >= 0
                @index -= 10
        moveDown: ->
            if (@index + 10) < @candidateSymbols.length
                @index += 10
        moveLeft: ->
            if (@index - 1) >= 0
                @index -= 1
        moveRight: ->
            if (@index + 1) < @candidateSymbols.length
                @index += 1
    computed:
        input:
            set: (input) ->
                @candidateSymbols = input.candidateSymbols
                @suggestionKeys = input.suggestionKeys
                @rawInput = input.rawInput
                @index = 0
        partialCandidateSymbols: -> _.take(_.drop(@candidateSymbols, @row * 10), 10)
        selectedLeft:   -> _.take(@partialCandidateSymbols, @col)
        selected:       -> _.compact(@partialCandidateSymbols[@col])
        selectedRight:  -> _.drop(@partialCandidateSymbols, @col + 1)
