Commit a24e8bfc authored by Filipa Lacerda's avatar Filipa Lacerda

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

Fixed search terms not highlight

Closes #31997

See merge request !11198
parents 46a6fb38 6a547779
...@@ -608,7 +608,12 @@ GitLabDropdown = (function() { ...@@ -608,7 +608,12 @@ GitLabDropdown = (function() {
var link = document.createElement('a'); var link = document.createElement('a');
link.href = url; link.href = url;
if (this.highlight) {
link.innerHTML = text; link.innerHTML = text;
} else {
link.textContent = text;
}
if (selected) { if (selected) {
link.className = 'is-active'; link.className = 'is-active';
......
---
title: Fixed search terms not correctly highlighting
merge_request:
author:
...@@ -44,21 +44,18 @@ require('~/lib/utils/url_utility'); ...@@ -44,21 +44,18 @@ require('~/lib/utils/url_utility');
preloadFixtures('static/gl_dropdown.html.raw'); preloadFixtures('static/gl_dropdown.html.raw');
loadJSONFixtures('projects.json'); loadJSONFixtures('projects.json');
function initDropDown(hasRemote, isFilterable) { function initDropDown(hasRemote, isFilterable, extraOpts = {}) {
this.dropdownButtonElement = $('#js-project-dropdown', this.dropdownContainerElement).glDropdown({ const options = Object.assign({
selectable: true, selectable: true,
filterable: isFilterable, filterable: isFilterable,
data: hasRemote ? remoteMock.bind({}, this.projectsData) : this.projectsData, data: hasRemote ? remoteMock.bind({}, this.projectsData) : this.projectsData,
search: { search: {
fields: ['name'] fields: ['name']
}, },
text: (project) => { text: project => (project.name_with_namespace || project.name),
(project.name_with_namespace || project.name); id: project => project.id,
}, }, extraOpts);
id: (project) => { this.dropdownButtonElement = $('#js-project-dropdown', this.dropdownContainerElement).glDropdown(options);
project.id;
}
});
} }
beforeEach(() => { beforeEach(() => {
...@@ -80,6 +77,37 @@ require('~/lib/utils/url_utility'); ...@@ -80,6 +77,37 @@ require('~/lib/utils/url_utility');
expect(this.dropdownContainerElement).toHaveClass('open'); expect(this.dropdownContainerElement).toHaveClass('open');
}); });
it('escapes HTML as text', () => {
this.projectsData[0].name_with_namespace = '<script>alert("testing");</script>';
initDropDown.call(this, false);
this.dropdownButtonElement.click();
expect(
$('.dropdown-content li:first-child').text(),
).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', () => { describe('that is open', () => {
beforeEach(() => { beforeEach(() => {
initDropDown.call(this, false, false); initDropDown.call(this, false, false);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment