Search bar not working on IE

Summary

Search bar is not working on IE

Steps to reproduce

1. Go to issues page on IE
2. Type author:

Expected behavior

Should hide the hint dropdown and open the author dropdown

Actual behavior

Hint dropdown does not go away and the author dropdown opens without data

Relevant logs and/or screenshots

In addition to this: you can't use arrow keys to navigate through the dropdown list.

@maxraab

In addition to this: you can't use arrow keys to navigate through the dropdown list.

This feature is not implemented yet. See #25913 (closed)

@blackst0ne Oh, I've probably overlooked. I just recognized that the arrow keys don't work.

added ~978334 label

changed milestone to %8.16

assigned to @filipa

mentioned in issue #26770 (closed)

The reason this does not work is because new Event() is not supported by IE as you can see in here: https://developer.mozilla.org/en-US/docs/Web/API/Event/Event and it's being used in here https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6#L81

This is simply solved by adding CustomEvent polyfill and use it instead.

BUT When we do that, we have a new problem:

The closest function is from Droplab which means we need to fix that in that lib. - https://gitlab.com/jschatz1/DropLab/issues/19

//cc @iamphill @lbennett @jschatz1

@jschatz1

IE problem is:

1. Go to issues page
2. Click in the input filter
3. You will see the drodpdown with the hints
4. Click in <@author> (or any other hint)

What I could debug untill know - and the only thing I know for sure is:

1. First problem is: Object doens’t support this action- This one is easy: We need to change Event to CustomEvent in here: https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6#L81 because Event is not supported by IE

2. After fixing that we will catch the second problem, IE will throw an error inside the while inside the closest function of DropLab: Unable to get property ‘tagName’ of undefined or null reference this error is thrown in this line: https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/droplab/droplab.js#L671

and this happens because .parentNode is null.

This function is called by this line: https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/droplab/droplab.js#L273 the e.target.parentNode is already null in here.

My guess is, when this line runs https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/droplab/droplab.js#L281 the content of the hint dropdown is not in the DOM yet. But it’s just a guess

@jschatz1 going to assign to you, feel free to assign it back if you need

(I will continue debugging in a couple of hours, see if I can figure it out)

assigned to @jschatz1

assigned to @MadLittleMods

mentioned in commit 494a531e

mentioned in merge request !8675 (merged)

mentioned in commit 9854fa22

mentioned in issue #25913 (closed)

mentioned in commit c0a9ece1

closed via merge request !8675 (merged)

mentioned in commit 611917ec

added ~1114661 label

mentioned in commit 99a99a3e

mentioned in commit 1b63b3fe

mentioned in commit e8552366

mentioned in merge request !8689 (merged)

added ~17876 label

added ~874211 label

added ~14281 label

mentioned in commit b697b783

added devopsplan label