Merge branch '57734-improve-label-dropdown-selection-performance' into 'master'

Improve labels select rendering

Closes #48230 and #57734

See merge request gitlab-org/gitlab-ce!25281

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

@@ -199,8 +199,8 @@ export default class LabelsSelect {
             .catch(() => flash(__('Error fetching labels.')));
         },
         renderRow: function(label, instance) {
-          var $a,
-            $li,
+          var linkEl,
+            listItemEl,
             color,
             colorEl,
             indeterminate,
@@ -209,12 +209,11 @@ export default class LabelsSelect {
             spacing,
             i,
             marked,
-            dropdownName,
             dropdownValue;
-          $li = $('<li>');
-          $a = $('<a href="#">');
+
           selectedClass = [];
           removesAll = label.id <= 0 || label.id == null;
+
           if ($dropdown.hasClass('js-filter-bulk-update')) {
             indeterminate = $dropdown.data('indeterminate') || [];
             marked = $dropdown.data('marked') || [];
@@ -233,7 +232,6 @@ export default class LabelsSelect {
             }
           } else {
             if (this.id(label)) {
-              dropdownName = $dropdown.data('fieldName');
               dropdownValue = this.id(label)
                 .toString()
                 .replace(/'/g, "\\'");
@@ -241,7 +239,7 @@ export default class LabelsSelect {
               if (
                 $form.find(
                   "input[type='hidden'][name='" +
-                    dropdownName +
+                    this.fieldName +
                     "'][value='" +
                     dropdownValue +
                     "']",
@@ -251,24 +249,34 @@ export default class LabelsSelect {
               }
             }
 
-            if ($dropdown.hasClass('js-multiselect') && removesAll) {
+            if (this.multiSelect && removesAll) {
               selectedClass.push('dropdown-clear-active');
             }
           }
+
           if (label.color) {
             colorEl =
               "<span class='dropdown-label-box' style='background: " + label.color + "'></span>";
           } else {
             colorEl = '';
           }
+
+          linkEl = document.createElement('a');
+          linkEl.href = '#';
+
           // We need to identify which items are actually labels
           if (label.id) {
             selectedClass.push('label-item');
-            $a.attr('data-label-id', label.id);
+            linkEl.dataset.labelId = label.id;
           }
-          $a.addClass(selectedClass.join(' ')).html(`${colorEl} ${_.escape(label.title)}`);
-          // Return generated html
-          return $li.html($a).prop('outerHTML');
+
+          linkEl.className = selectedClass.join(' ');
+          linkEl.innerHTML = `${colorEl} ${_.escape(label.title)}`;
+
+          listItemEl = document.createElement('li');
+          listItemEl.appendChild(linkEl);
+
+          return listItemEl;
         },
         search: {
           fields: ['title'],

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

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