Remove focus styles from dropdown empty link

Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/37023

app/assets/javascripts/gl_dropdown.js

@@ -175,7 +175,7 @@ GitLabDropdownFilter = (function() {
         elements.show().removeClass('option-hidden');
       }
 
-      elements.parent().find('.dropdown-menu-empty-link').toggleClass('hidden', elements.is(':visible'));
+      elements.parent().find('.dropdown-menu-empty-item').toggleClass('hidden', elements.is(':visible'));
     }
   };
 
@@ -247,7 +247,7 @@ GitLabDropdown = (function() {
 
   currentIndex = -1;
 
-  NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link';
+  NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-item';
 
   SELECTABLE_CLASSES = ".dropdown-content li:not(" + NON_SELECTABLE_CLASSES + ", .option-hidden)";
 
@@ -718,7 +718,7 @@ GitLabDropdown = (function() {
 
   GitLabDropdown.prototype.noResults = function() {
     var html;
-    return html = '<li class="dropdown-menu-empty-link"><a href="#" class="is-focused">No matching results</a></li>';
+    return '<li class="dropdown-menu-empty-item"><a>No matching results</a></li>';
   };
 
   GitLabDropdown.prototype.rowClicked = function(el) {

app/assets/javascripts/search_autocomplete.js

@@ -363,7 +363,7 @@
 
     restoreMenu() {
       var html;
-      html = "<ul> <li><a class='dropdown-menu-empty-link is-focused'>Loading...</a></li> </ul>";
+      html = '<ul><li class="dropdown-menu-empty-item"><a>Loading...</a></li></ul>';
       return this.dropdownContent.html(html);
     }
 

app/assets/stylesheets/framework/dropdowns.scss

@@ -163,12 +163,6 @@
     }
   }
 
-  &.dropdown-menu-empty-link {
-    &.is-focused {
-      background-color: $dropdown-empty-row-bg;
-    }
-  }
-
   &.dropdown-menu-user-link {
     line-height: 16px;
   }
@@ -256,6 +250,13 @@
     @include dropdown-link;
   }
 
+  .dropdown-menu-empty-item a {
+    &:hover,
+    &:focus {
+      background-color: transparent;
+    }
+  }
+
   .dropdown-header {
     color: $gl-text-color-secondary;
     font-size: 13px;
@@ -785,6 +786,13 @@
           }
         }
       }
+
+      &.dropdown-menu-empty-item a {
+        &:hover,
+        &:focus {
+          background-color: transparent;
+        }
+      }
     }
 
     &.dropdown-menu-selectable {

app/views/layouts/_search.html.haml

@@ -17,8 +17,8 @@
           .dropdown-menu.dropdown-select
             = dropdown_content do
               %ul
-                %li
-                  %a.is-focused.dropdown-menu-empty-link
+                %li.dropdown-menu-empty-item
+                  %a
                     Loading...
             = dropdown_loading
           %i.search-icon

app/views/projects/diffs/_stats.html.haml

@@ -29,6 +29,6 @@
                   +#{diff_file.added_lines}
                 %span.cred<
                   \-#{diff_file.removed_lines}
-        %li.dropdown-menu-empty-link.hidden
-          %a{ href: "#" }
+        %li.dropdown-menu-empty-item.hidden
+          %a
             No files found.

changelogs/unreleased/37023-remove-focus-styles-from-dropdown-empty-link.yml

+---
+title: Remove focus styles from dropdown empty links
+merge_request:
+author:
+type: fixed

spec/javascripts/gl_dropdown_spec.js

@@ -8,7 +8,7 @@ describe('glDropdown', function describeDropdown() {
   preloadFixtures('static/gl_dropdown.html.raw');
   loadJSONFixtures('projects.json');
 
-  const NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link';
+  const NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-item';
   const SEARCH_INPUT_SELECTOR = '.dropdown-input-field';
   const ITEM_SELECTOR = `.dropdown-content li:not(${NON_SELECTABLE_CLASSES})`;
   const FOCUSED_ITEM_SELECTOR = `${ITEM_SELECTOR} a.is-focused`;