Merge branch 'issuable-sidebar-edit-button-field-focus' into 'master'

Fixed dropdown filter input not focusing after transition

Closes #33216

See merge request !12020

app/assets/javascripts/gl_dropdown.js

@@ -248,7 +248,7 @@ GitLabDropdown = (function() {
             return function(data) {
               _this.fullData = data;
               _this.parseData(_this.fullData);
-              _this.focusTextInput();
+              _this.focusTextInput(true);
               if (_this.options.filterable && _this.filter && _this.filter.input && _this.filter.input.val() && _this.filter.input.val().trim() !== '') {
                 return _this.filter.input.trigger('input');
               }
@@ -728,8 +728,20 @@ GitLabDropdown = (function() {
     return [selectedObject, isMarking];
   };
 
-  GitLabDropdown.prototype.focusTextInput = function() {
-    if (this.options.filterable) { this.filterInput.focus(); }
+  GitLabDropdown.prototype.focusTextInput = function(triggerFocus = false) {
+    if (this.options.filterable) {
+      $(':focus').blur();
+
+      this.dropdown.one('transitionend', () => {
+        this.filterInput.focus();
+      });
+
+      if (triggerFocus) {
+        // This triggers after a ajax request
+        // in case of slow requests, the dropdown transition could already be finished
+        this.dropdown.trigger('transitionend');
+      }
+    }
   };
 
   GitLabDropdown.prototype.addInput = function(fieldName, value, selectedObject) {

changelogs/unreleased/issuable-sidebar-edit-button-field-focus.yml

+---
+title: Fixed dropdown filter input not focusing after transition
+merge_request:
+author:

spec/javascripts/gl_dropdown_spec.js

@@ -185,7 +185,7 @@ import '~/lib/utils/url_utility';
         expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR));
       });
 
-      it('should focus on input when opening for the second time', () => {
+      it('should focus on input when opening for the second time after transition', () => {
         remoteCallback();
         this.dropdownContainerElement.trigger({
           type: 'keyup',
@@ -193,6 +193,7 @@ import '~/lib/utils/url_utility';
           keyCode: ARROW_KEYS.ESC
         });
         this.dropdownButtonElement.click();
+        this.dropdownContainerElement.trigger('transitionend');
         expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR));
       });
     });
@@ -201,6 +202,7 @@ import '~/lib/utils/url_utility';
       it('should focus input when passing array data to drop down', () => {
         initDropDown.call(this, false, true);
         this.dropdownButtonElement.click();
+        this.dropdownContainerElement.trigger('transitionend');
         expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR));
       });
     });