Merge branch 'fix-search-not-highlighting' into 'master'

Fixed search terms not highlight

Closes #31997

See merge request !11198

3 files changed, 34 insertions, 5 deletions

diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index 5511a7b676d..2306d7b38aa 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -584,7 +584,12 @@ GitLabDropdown = (function() {
       var link = document.createElement('a');
 
       link.href = url;
-      link.textContent = text;
+
+      if (this.highlight) {
+        link.innerHTML = text;
+      } else {
+        link.textContent = text;
+      }
 
       if (selected) {
         link.className = 'is-active';
diff --git a/changelogs/unreleased/fix-search-not-highlighting.yml b/changelogs/unreleased/fix-search-not-highlighting.yml
new file mode 100644
index 00000000000..a624530ebd1
--- /dev/null
+++ b/changelogs/unreleased/fix-search-not-highlighting.yml
@@ -0,0 +1,4 @@
+---
+title: Fixed search terms not correctly highlighting
+merge_request:
+author:
diff --git a/spec/javascripts/gl_dropdown_spec.js b/spec/javascripts/gl_dropdown_spec.js
index 42c6e328fac..eb532dff5a1 100644
--- a/spec/javascripts/gl_dropdown_spec.js
+++ b/spec/javascripts/gl_dropdown_spec.js
@@ -44,8 +44,8 @@ require('~/lib/utils/url_utility');
     preloadFixtures('static/gl_dropdown.html.raw');
     loadJSONFixtures('projects.json');
 
-    function initDropDown(hasRemote, isFilterable) {
-      this.dropdownButtonElement = $('#js-project-dropdown', this.dropdownContainerElement).glDropdown({
+    function initDropDown(hasRemote, isFilterable, extraOpts = {}) {
+      const options = Object.assign({
         selectable: true,
         filterable: isFilterable,
         data: hasRemote ? remoteMock.bind({}, this.projectsData) : this.projectsData,
@@ -53,8 +53,9 @@ require('~/lib/utils/url_utility');
           fields: ['name']
         },
         text: project => (project.name_with_namespace || project.name),
-        id: project => project.id
-      });
+        id: project => project.id,
+      }, extraOpts);
+      this.dropdownButtonElement = $('#js-project-dropdown', this.dropdownContainerElement).glDropdown(options);
     }
 
     beforeEach(() => {
@@ -88,6 +89,25 @@ require('~/lib/utils/url_utility');
       ).toBe('<script>alert("testing");</script>');
     });
 
+    it('should output HTML when highlighting', () => {
+      this.projectsData[0].name_with_namespace = 'testing';
+      $('.dropdown-input .dropdown-input-field').val('test');
+
+      initDropDown.call(this, false, true, {
+        highlight: true,
+      });
+
+      this.dropdownButtonElement.click();
+
+      expect(
+        $('.dropdown-content li:first-child').text(),
+      ).toBe('testing');
+
+      expect(
+        $('.dropdown-content li:first-child a').html(),
+      ).toBe('<b>t</b><b>e</b><b>s</b><b>t</b>ing');
+    });
+
     describe('that is open', () => {
       beforeEach(() => {
         initDropDown.call(this, false, false);