Fixes #3414 - Cursor locked in and can't leave date select field in Safari.

app/assets/javascripts/app/lib/bootstrap/bootstrap-timepicker.js

@@ -111,13 +111,11 @@
       }
 
       this.setDefaultTime(this.defaultTime);
-      this.blurElement()
     },
 
     blurElement: function() {
       this.highlightedUnit = null;
       this.updateFromElementVal();
-      this.$element.get(0).setSelectionRange(0,0)
     },
 
     clear: function() {
@@ -418,7 +416,14 @@
       this.$widget.detach();
     },
 
-    highlightUnit: function() {
+    highlightUnit: function(e) {
+      setTimeout($.proxy(this.highlightUnitDelayed, this), 0);
+    },
+
+    // has to run asynchronously to keep both Firefox and Safari
+    // https://github.com/zammad/zammad/issues/3414
+    // https://github.com/zammad/zammad/issues/2887
+    highlightUnitDelayed: function(e) {
       this.position = this.getCursorPosition();
       if (this.position >= 0 && this.position <= 2) {
         this.highlightHour();

public/assets/tests/form_datetime.js

@@ -1,6 +1,4 @@
 test("DateTime timepicker focuses hours", function(assert) {
-  var done = assert.async(1)
-
   var form = $('#forms')
 
   var el = $('<div></div>').attr('id', 'form1')
@@ -18,19 +16,9 @@ test("DateTime timepicker focuses hours", function(assert) {
     autofocus: true
   });
 
-  let timepicker1 = el.find('[data-name=datetime1] [data-item=time]')
-  //debugger
-
-  timepicker1.focus()
-
-  setTimeout(function(){ // give it time to apply focus
-    equal(timepicker1[0].selectionStart, 0)
-    equal(timepicker1[0].selectionEnd, 2)
-
-    equal(el.find('[data-name=datetime2] [data-item=date]')[0].disabled, true)
-    equal(el.find('[data-name=datetime2] [data-item=time]')[0].disabled, true)
-    equal(el.find('[data-name=date3]     [data-item=date]')[0].disabled, true)
-
-    done()
-  }, 100)
+  equal(el.find('[data-name=datetime1] [data-item=date]')[0].disabled, false)
+  equal(el.find('[data-name=datetime1] [data-item=time]')[0].disabled, false)
+  equal(el.find('[data-name=datetime2] [data-item=date]')[0].disabled, true)
+  equal(el.find('[data-name=datetime2] [data-item=time]')[0].disabled, true)
+  equal(el.find('[data-name=date3]     [data-item=date]')[0].disabled, true)
 });

spec/system/ticket/zoom_spec.rb

@@ -1266,6 +1266,49 @@ RSpec.describe 'Ticket zoom', type: :system do
     end
   end
 
+  describe 'Pending time field in ticket sidebar as agent' do
+    before do
+      ticket.update(pending_time: 1.day.from_now, state: Ticket::State.lookup(name: 'pending reminder'))
+
+      visit "ticket/zoom/#{ticket.id}"
+      await_empty_ajax_queue
+    end
+
+    let(:ticket) { Ticket.first }
+    let(:elem)   { find('.js-timepicker') }
+
+    # has to run asynchronously to keep both Firefox and Safari
+    # https://github.com/zammad/zammad/issues/3414
+    # https://github.com/zammad/zammad/issues/2887
+    context 'when clicking timepicker component' do
+      it 'in the first half, hours selected' do
+        within :active_content do
+          elem.click({ x: 10, y: 10 })
+          expect(elem).to have_selection(0..2)
+        end
+      end
+
+      it 'in the second half, minutes selected' do
+        within :active_content do
+          elem.click({ x: 30, y: 10 })
+          expect(elem).to have_selection(3..5)
+        end
+      end
+    end
+
+    matcher :have_selection do
+      match { starts_at == expected.begin && ends_at == expected.end }
+
+      def starts_at
+        actual.evaluate_script 'this.selectionStart'
+      end
+
+      def ends_at
+        actual.evaluate_script 'this.selectionEnd'
+      end
+    end
+  end
+
   describe 'Article ID URL / link' do
     let(:ticket) { create(:ticket, group: Group.first) }
     let!(:article) { create(:'ticket/article', ticket: ticket) }