     @render()
 
   render: ->
-    firstSelected = _.find @attribute.options, (option) -> option.selected
-
-    if firstSelected
-      @attribute.valueName = firstSelected.name
-      @attribute.value = firstSelected.value
-    else if @attribute.unknown && @attribute.value
-      @attribute.valueName = @attribute.value
-    else if @hasSubmenu @attribute.options
-      @attribute.valueName = @getName @attribute.value, @attribute.options
+    @updateAttributeValueName()
 
     @html App.view('generic/searchable_select')
       attribute: @attribute

    'blur .js-input':        'onBlur'
    'focus .js-input':       'onFocus'
    'focus .js-shadow':      'onShadowFocus'
    'click .js-option':      'selectItem'
    'click .js-enter':       'navigateIn'
    'click .js-back':        'navigateOut'

  onShadowFocus: ->
    @input.focus()

  onShadowChange: ->
    value = @shadowInput.val()

    for option in @attribute.options
      option.selected = (option.value + '') == value # makes sure option value is always a string

  onInput: (event) =>
    @toggle() if not @isOpen

