Remove focus styles from dropdown empty link37023-remove-focus-styles-from-dropdown-empty-link

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

7 files changed, 28 insertions, 15 deletions

diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index 6f7671aa6fe..50d822eba5a 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/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)";
 
@@ -702,7 +702,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) {
diff --git a/app/assets/javascripts/search_autocomplete.js b/app/assets/javascripts/search_autocomplete.js
index 6fd5345a0a6..003a15592f3 100644
--- a/app/assets/javascripts/search_autocomplete.js
+++ b/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);
     }
 
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 6b21def33a6..5eb207a93f7 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/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;
@@ -800,6 +801,13 @@
           }
         }
       }
+
+      &.dropdown-menu-empty-item a {
+        &:hover,
+        &:focus {
+          background-color: transparent;
+        }
+      }
     }
 
     &.dropdown-menu-selectable {
diff --git a/app/views/layouts/_search.html.haml b/app/views/layouts/_search.html.haml
index 59f16b47bf7..cd7a47da4a1 100644
--- a/app/views/layouts/_search.html.haml
+++ b/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
diff --git a/app/views/projects/diffs/_stats.html.haml b/app/views/projects/diffs/_stats.html.haml
index 02fd54c97fb..ad2d355ab4a 100644
--- a/app/views/projects/diffs/_stats.html.haml
+++ b/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.
diff --git a/changelogs/unreleased/37023-remove-focus-styles-from-dropdown-empty-link.yml b/changelogs/unreleased/37023-remove-focus-styles-from-dropdown-empty-link.yml
new file mode 100644
index 00000000000..fcaa6ec13f8
--- /dev/null
+++ b/changelogs/unreleased/37023-remove-focus-styles-from-dropdown-empty-link.yml
@@ -0,0 +1,5 @@
+---
+title: Remove focus styles from dropdown empty links
+merge_request:
+author:
+type: fixed
diff --git a/spec/javascripts/gl_dropdown_spec.js b/spec/javascripts/gl_dropdown_spec.js
index dcb8dbce178..ca048123bf7 100644
--- a/spec/javascripts/gl_dropdown_spec.js
+++ b/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`;