Add tags on blur.

app/assets/javascripts/app/controllers/_ui_element/tag.coffee

@@ -3,7 +3,7 @@ class App.UiElement.tag
   @render: (attribute) ->
     item = $( App.view('generic/input')( attribute: attribute ) )
     a = ->
-      $('#' + attribute.id ).tokenfield()
+      $('#' + attribute.id ).tokenfield(createTokensOnBlur: true)
       $('#' + attribute.id ).parent().css('height', 'auto')
     App.Delay.set(a, 120, undefined, 'tags')
     item

app/assets/javascripts/app/controllers/widget/tag.coffee

@@ -5,7 +5,7 @@ class App.WidgetTag extends App.Controller
 
   events:
     'click .js-newTagLabel': 'showInput'
-    'blur .js-newTagInput':  'hideInput'
+    'blur .js-newTagInput':  'hideOrAddInput'
     'click .js-newTagInput': 'onAddTag'
     'submit form':           'onAddTag'
     'click .js-delete':      'onRemoveTag'
@@ -45,10 +45,11 @@ class App.WidgetTag extends App.Controller
     @newTagLabel.addClass('hide')
     @newTagInput.removeClass('hide').focus()
 
-  hideInput: (e) ->
+  hideOrAddInput: (e) ->
     e.preventDefault()
     @newTagLabel.removeClass('hide')
     @newTagInput.addClass('hide')
+    @onAddTag(e)
 
   onAddTag: (e) =>
     e.preventDefault()

test/browser/agent_ticket_actions_level8_test.rb

@@ -2,7 +2,7 @@
 require 'browser_test_helper'
 
 class AgentTicketActionLevel8Test < TestCase
-  def test_tags
+  def test_a_tags
 
     @browser = browser_instance
     login(
@@ -12,13 +12,113 @@ class AgentTicketActionLevel8Test < TestCase
     )
     tasks_close_all()
 
-    # create new ticket
+    # set tag (by tab)
     ticket1 = ticket_create(
       data: {
         customer: 'nico',
         group: 'Users',
-        title: 'some subject 123äöü - tags',
-        body: 'some body 123äöü - tags',
+        title: 'some subject 123äöü - tags 1',
+        body: 'some body 123äöü - tags 1',
+      },
+      do_not_submit: true,
+    )
+    sleep 1
+    set(
+      css: '.active .ticket-form-bottom .token-input',
+      value: 'tag1, tag2',
+    )
+    sendkey(
+      value: :tab,
+    )
+
+    # reload browser
+    sleep 6
+    reload()
+    sleep 2
+
+    click(
+      css: '.active .newTicket button.js-submit',
+    )
+    sleep 5
+    if @browser.current_url !~ /#{Regexp.quote('#ticket/zoom/')}/
+      raise 'Unable to create ticket!'
+    end
+
+    # verify tags
+    tags = @browser.find_elements({ css: '.content.active .js-tag' })
+    assert(tags)
+    assert(tags[0])
+    tag1_found = false
+    tag2_found = false
+    tags.each {|element|
+      text = element.text
+      if text == 'tag1'
+        tag1_found = true
+        assert(true, 'tag1 exists')
+      elsif text == 'tag2'
+        tag2_found = true
+        assert(true, 'tag2 exists')
+      else
+        assert(false, "invalid tag '#{text}'")
+      end
+    }
+    assert(tag1_found, 'tag1 exists')
+    assert(tag2_found, 'tag2 exists')
+
+    # set tag (by blur)
+    ticket2 = ticket_create(
+      data: {
+        customer: 'nico',
+        group: 'Users',
+        title: 'some subject 123äöü - tags 2',
+        body: 'some body 123äöü - tags 2',
+      },
+      do_not_submit: true,
+    )
+    sleep 1
+    set(
+      css: '.active .ticket-form-bottom .token-input',
+      value: 'tag3, tag4',
+    )
+    click(
+      css: '#global-search',
+    )
+
+    click(
+      css: '.active .newTicket button.js-submit',
+    )
+    sleep 5
+    if @browser.current_url !~ /#{Regexp.quote('#ticket/zoom/')}/
+      raise 'Unable to create ticket!'
+    end
+
+    # verify tags
+    tags = @browser.find_elements({ css: '.content.active .js-tag' })
+    assert(tags)
+    assert(tags[0])
+    tag3_found = false
+    tag4_found = false
+    tags.each {|element|
+      text = element.text
+      if text == 'tag3'
+        tag3_found = true
+        assert(true, 'tag 3 exists')
+      elsif text == 'tag4'
+        tag4_found = true
+        assert(true, 'tag 4 exists')
+      else
+        assert(false, "invalid tag '#{text}'")
+      end
+    }
+    assert(tag3_found, 'tag3 exists')
+    assert(tag4_found, 'tag4 exists')
+
+    ticket3 = ticket_create(
+      data: {
+        customer: 'nico',
+        group: 'Users',
+        title: 'some subject 123äöü - tags 3',
+        body: 'some body 123äöü - tags 3',
       },
     )
 
@@ -33,6 +133,7 @@ class AgentTicketActionLevel8Test < TestCase
     sendkey(
       value: :enter,
     )
+    sleep 0.5
 
     # set tag #2
     click(
@@ -45,6 +146,7 @@ class AgentTicketActionLevel8Test < TestCase
     sendkey(
       value: :enter,
     )
+    sleep 0.5
 
     # set tag #3 + #4
     click(
@@ -57,25 +159,56 @@ class AgentTicketActionLevel8Test < TestCase
     sendkey(
       value: :enter,
     )
+    sleep 0.5
+
+    # set tag #5
+    click(
+      css: '.content.active .js-newTagLabel',
+    )
+    set(
+      css: '.content.active .js-newTagInput',
+      value: 'tag5',
+    )
+    click(
+      css: '#global-search',
+    )
+    sleep 0.5
 
     # verify tags
     tags = @browser.find_elements({ css: '.content.active .js-tag' })
     assert(tags)
     assert(tags[0])
+    tag1_found = false
+    tag2_found = false
+    tag3_found = false
+    tag4_found = false
+    tag5_found = false
     tags.each {|element|
       text = element.text
       if text == 'tag1'
+        tag1_found = true
         assert(true, 'tag1 exists')
       elsif text == 'tag 2'
+        tag2_found = true
         assert(true, 'tag 2 exists')
       elsif text == 'tag3'
+        tag3_found = true
         assert(true, 'tag3 exists')
       elsif text == 'tag4'
+        tag4_found = true
         assert(true, 'tag4 exists')
+      elsif text == 'tag5'
+        tag5_found = true
+        assert(true, 'tag5 exists')
       else
         assert(false, "invalid tag '#{text}'")
       end
     }
+    assert(tag1_found, 'tag1 exists')
+    assert(tag2_found, 'tag2 exists')
+    assert(tag3_found, 'tag3 exists')
+    assert(tag4_found, 'tag4 exists')
+    assert(tag5_found, 'tag5 exists')
 
     # reload browser
     reload()
@@ -84,23 +217,40 @@ class AgentTicketActionLevel8Test < TestCase
     tags = @browser.find_elements({ css: '.content.active .js-tag' })
     assert(tags)
     assert(tags[0])
+    tag1_found = false
+    tag2_found = false
+    tag3_found = false
+    tag4_found = false
+    tag5_found = false
     tags.each {|element|
       text = element.text
       if text == 'tag1'
+        tag1_found = true
         assert(true, 'tag1 exists')
       elsif text == 'tag 2'
+        tag2_found = true
         assert(true, 'tag 2 exists')
       elsif text == 'tag3'
+        tag3_found = true
         assert(true, 'tag3 exists')
       elsif text == 'tag4'
+        tag4_found = true
         assert(true, 'tag4 exists')
+      elsif text == 'tag5'
+        tag5_found = true
+        assert(true, 'tag5 exists')
       else
         assert(false, "invalid tag '#{text}'")
       end
     }
+    assert(tag1_found, 'tag1 exists')
+    assert(tag2_found, 'tag2 exists')
+    assert(tag3_found, 'tag3 exists')
+    assert(tag4_found, 'tag4 exists')
+    assert(tag5_found, 'tag5 exists')
   end
 
-  def test_link
+  def test_b_link
 
     @browser = browser_instance
     login(