Merge branch 'jivl-fix-labels-not-displayed-after-selection' into 'master'

Resolve: Labels are not displayed after selection

Closes #47250

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

app/assets/javascripts/labels_select.js

@@ -426,7 +426,7 @@ export default class LabelsSelect {
     const tpl = _.template([
       '<% _.each(labels, function(label){ %>',
       '<a href="<%- issueUpdateURL.slice(0, issueUpdateURL.lastIndexOf("/")) %>?label_name[]=<%- encodeURIComponent(label.title) %>">',
-      '<span class="label has-tooltip color-label" title="<%- label.description %>" style="background-color: <%- label.color %>; color: <%- label.text_color %>;">',
+      '<span class="badge label has-tooltip color-label" title="<%- label.description %>" style="background-color: <%- label.color %>; color: <%- label.text_color %>;">',
       '<%- label.title %>',
       '</span>',
       '</a>',

spec/javascripts/labels_select_spec.js

@@ -40,5 +40,9 @@ describe('LabelsSelect', () => {
     it('generated label item template has correct label styles', () => {
       expect($labelEl.find('span.label').attr('style')).toBe(`background-color: ${label.color}; color: ${label.text_color};`);
     });
+
+    it('generated label item has a badge class', () => {
+      expect($labelEl.find('span').hasClass('badge')).toEqual(true);
+    });
   });
 });