Merge branch '26803-typing-then-tab-in-a-comment-doesn-t-select-the-author' into 'master'

Fixed highlightFirst and added specs

Closes #26803

See merge request !8622

app/assets/javascripts/gfm_auto_complete.js.es6

@@ -48,8 +48,9 @@
     },
     DefaultOptions: {
       sorter: function(query, items, searchKey) {
-        this.setting.highlightFirst = query.length > 0;
+        this.setting.highlightFirst = this.setting.alwaysHighlightFirst || query.length > 0;
         if (gl.GfmAutoComplete.isLoading(items)) {
+          this.setting.highlightFirst = false;
           return items;
         }
         return $.fn.atwho["default"].callbacks.sorter(query, items, searchKey);

spec/features/issues/gfm_autocomplete_spec.rb

@@ -33,6 +33,45 @@ feature 'GFM autocomplete', feature: true, js: true do
     expect(page).not_to have_selector('.atwho-view')
   end
 
+  it 'doesnt select the first item for non-assignee dropdowns' do
+    page.within '.timeline-content-form' do
+      find('#note_note').native.send_keys('')
+      find('#note_note').native.send_keys(':')
+    end
+
+    expect(page).to have_selector('.atwho-container')
+
+    wait_for_ajax
+
+    expect(find('#at-view-58')).not_to have_selector('.cur:first-of-type')
+  end
+
+  it 'selects the first item for assignee dropdowns' do
+    page.within '.timeline-content-form' do
+      find('#note_note').native.send_keys('')
+      find('#note_note').native.send_keys('@')
+    end
+
+    expect(page).to have_selector('.atwho-container')
+
+    wait_for_ajax
+
+    expect(find('#at-view-64')).to have_selector('.cur:first-of-type')
+  end
+
+  it 'selects the first item for non-assignee dropdowns if a query is entered' do
+    page.within '.timeline-content-form' do
+      find('#note_note').native.send_keys('')
+      find('#note_note').native.send_keys(':1')
+    end
+
+    expect(page).to have_selector('.atwho-container')
+
+    wait_for_ajax
+
+    expect(find('#at-view-58')).to have_selector('.cur:first-of-type')
+  end
+
   context 'if a selected value has special characters' do
     it 'wraps the result in double quotes' do
       note = find('#note_note')

spec/javascripts/gfm_auto_complete_spec.js.es6

@@ -0,0 +1,65 @@
+//= require gfm_auto_complete
+//= require jquery
+//= require jquery.atwho
+
+const global = window.gl || (window.gl = {});
+const GfmAutoComplete = global.GfmAutoComplete;
+
+describe('GfmAutoComplete', function () {
+  describe('DefaultOptions.sorter', function () {
+    describe('assets loading', function () {
+      beforeEach(function () {
+        spyOn(GfmAutoComplete, 'isLoading').and.returnValue(true);
+
+        this.atwhoInstance = { setting: {} };
+        this.items = [];
+
+        this.sorterValue = GfmAutoComplete.DefaultOptions.sorter
+          .call(this.atwhoInstance, '', this.items);
+      });
+
+      it('should disable highlightFirst', function () {
+        expect(this.atwhoInstance.setting.highlightFirst).toBe(false);
+      });
+
+      it('should return the passed unfiltered items', function () {
+        expect(this.sorterValue).toEqual(this.items);
+      });
+    });
+
+    describe('assets finished loading', function () {
+      beforeEach(function () {
+        spyOn(GfmAutoComplete, 'isLoading').and.returnValue(false);
+        spyOn($.fn.atwho.default.callbacks, 'sorter');
+      });
+
+      it('should enable highlightFirst if alwaysHighlightFirst is set', function () {
+        const atwhoInstance = { setting: { alwaysHighlightFirst: true } };
+
+        GfmAutoComplete.DefaultOptions.sorter.call(atwhoInstance);
+
+        expect(atwhoInstance.setting.highlightFirst).toBe(true);
+      });
+
+      it('should enable highlightFirst if a query is present', function () {
+        const atwhoInstance = { setting: {} };
+
+        GfmAutoComplete.DefaultOptions.sorter.call(atwhoInstance, 'query');
+
+        expect(atwhoInstance.setting.highlightFirst).toBe(true);
+      });
+
+      it('should call the default atwho sorter', function () {
+        const atwhoInstance = { setting: {} };
+
+        const query = 'query';
+        const items = [];
+        const searchKey = 'searchKey';
+
+        GfmAutoComplete.DefaultOptions.sorter.call(atwhoInstance, query, items, searchKey);
+
+        expect($.fn.atwho.default.callbacks.sorter).toHaveBeenCalledWith(query, items, searchKey);
+      });
+    });
+  });
+});