Fix gl_dropdown/render failing snapshotsfe-pin-gl-dropdown-render-data

- Reorder adding of `is-active` class
- Render element even if hiding
- Allow passing gl_dropdown instance to renderRow

2 files changed, 16 insertions, 6 deletions

diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index 0970e5c622c..fae299d784c 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -697,6 +697,7 @@ const GitLabDropdown = (function() {
       data,
       group,
       index,
+      instance: this,
     });
   };
 
diff --git a/app/assets/javascripts/gl_dropdown/render.js b/app/assets/javascripts/gl_dropdown/render.js
index 92d22750758..877570aacbb 100644
--- a/app/assets/javascripts/gl_dropdown/render.js
+++ b/app/assets/javascripts/gl_dropdown/render.js
@@ -162,12 +162,13 @@ function createLink(url, selected, options) {
   const link = document.createElement('a');
 
   link.href = url;
-  link.classList.toggle('is-active', selected);
 
   if (options.icon) {
     link.classList.add('d-flex', 'align-items-center');
   }
 
+  link.classList.toggle('is-active', selected);
+
   return link;
 }
 
@@ -200,12 +201,12 @@ function generateLink(row, chunk, options) {
   return row;
 }
 
-function standardRender(li, chunk, options) {
+function standardRender(li, chunk, options, instance) {
   let row;
 
   if (options.renderRow) {
     // Arbitrary consumer override
-    row = options.renderRow(chunk);
+    row = options.renderRow(chunk, instance);
   } else {
     // Default render logic
     row = generateLink(li, chunk, options);
@@ -214,16 +215,24 @@ function standardRender(li, chunk, options) {
   return row;
 }
 
-export default function item({ data: chunk, options = {}, group = false, index = false }) {
+export default function item({
+  data: chunk,
+  options = {},
+  group = false,
+  index = false,
+  instance,
+}) {
   const opts = ingestOptions(options, group, index);
   let li = document.createElement('li');
 
   if (shouldHide(chunk, opts)) {
     li = hideElement(li);
-  } else if (specialProcessors.has(chunk.type)) {
+  }
+
+  if (specialProcessors.has(chunk.type)) {
     li = specialProcessors.get(chunk.type)(li, chunk);
   } else {
-    li = standardRender(li, chunk, opts);
+    li = standardRender(li, chunk, opts, instance);
   }
 
   return li;