Add latest changes from gitlab-org/gitlab@14-5-stable-eev14.5.0-rc42

1 files changed, 12 insertions, 6 deletions

diff --git a/app/assets/javascripts/breadcrumb.js b/app/assets/javascripts/breadcrumb.js
index b8b8a0b2867..b9d3742974c 100644
--- a/app/assets/javascripts/breadcrumb.js
+++ b/app/assets/javascripts/breadcrumb.js
@@ -1,5 +1,4 @@
 import $ from 'jquery';
-import { hide } from '~/tooltips';
 
 export const addTooltipToEl = (el) => {
   const textEl = el.querySelector('.js-breadcrumb-item-text');
@@ -19,16 +18,23 @@ export default () => {
       .filter((el) => !el.classList.contains('dropdown'))
       .map((el) => el.querySelector('a'))
       .filter((el) => el);
-    const $expander = $('.js-breadcrumbs-collapsed-expander');
+    const $expanderBtn = $('.js-breadcrumbs-collapsed-expander');
 
     topLevelLinks.forEach((el) => addTooltipToEl(el));
 
-    $expander.closest('.dropdown').on('show.bs.dropdown hide.bs.dropdown', (e) => {
-      const $el = $('.js-breadcrumbs-collapsed-expander', e.currentTarget);
+    $expanderBtn.on('click', () => {
+      const detailItems = $('.breadcrumbs-detail-item');
+      const hiddenClass = 'gl-display-none!';
 
-      $el.toggleClass('open');
+      $.each(detailItems, (_key, item) => {
+        $(item).toggleClass(hiddenClass);
+      });
 
-      hide($el);
+      // remove the ellipsis
+      $('li.expander').remove();
+
+      // set focus on first breadcrumb item
+      $('.breadcrumb-item-text').first().focus();
     });
   }
 };