Improve glDropdown rendering performance

Return jQuery element instead of HTML for renderRow for labels select

app/assets/javascripts/gl_dropdown.js

@@ -656,23 +656,7 @@ GitLabDropdown = (function() {
     if (this.options.renderMenu) {
       return this.options.renderMenu(html);
     } else {
-      var ul = document.createElement('ul');
-
-      for (var i = 0; i < html.length; i += 1) {
-        var el = html[i];
-
-        if (el instanceof $) {
-          el = el.get(0);
-        }
-
-        if (typeof el === 'string') {
-          ul.innerHTML += el;
-        } else {
-          ul.appendChild(el);
-        }
-      }
-
-      return ul;
+      return $('<ul>').append(html);
     }
   };

app/assets/javascripts/labels_select.js

@@ -266,9 +266,10 @@ export default class LabelsSelect {
             selectedClass.push('label-item');
             $a.attr('data-label-id', label.id);
           }
+
           $a.addClass(selectedClass.join(' ')).html(`${colorEl} ${_.escape(label.title)}`);
-          // Return generated html
-          return $li.html($a).prop('outerHTML');
+
+          return $li.html($a);
         },
         search: {
           fields: ['title'],

changelogs/unreleased/57734-improve-label-dropdown-selection-performance.yml

+---
+title: Improve label select rendering
+merge_request: 25281
+author:
+type: performance