Merge branch '26785-fix-droplab-in-ie-11-v1' into 'master'

Fix DropLab in IE11 v1 (merge edition)

Closes #26785

See merge request !8689

3 files changed, 45 insertions, 21 deletions

diff --git a/app/assets/javascripts/droplab/droplab.js b/app/assets/javascripts/droplab/droplab.js
index 6c6d650db3a..c79f0230951 100644
--- a/app/assets/javascripts/droplab/droplab.js
+++ b/app/assets/javascripts/droplab/droplab.js
@@ -62,6 +62,7 @@ var DropDown = function(list) {
   this.list = list;
   this.items = [];
   this.getItems();
+  this.initTemplateString();
   this.addEvents();
   this.initialState = list.innerHTML;
 };
@@ -72,6 +73,17 @@ Object.assign(DropDown.prototype, {
     return this.items;
   },
 
+  initTemplateString: function() {
+    var items = this.items || this.getItems();
+
+    var templateString = '';
+    if(items.length > 0) {
+      templateString = items[items.length - 1].outerHTML;
+    }
+    this.templateString = templateString;
+    return this.templateString;
+  },
+
   clickEvent: function(e) {
     // climb up the tree to find the LI
     var selected = utils.closest(e.target, 'LI');
@@ -111,30 +123,21 @@ Object.assign(DropDown.prototype, {
 
   addData: function(data) {
     this.data = (this.data || []).concat(data);
-    this.render(data);
+    this.render(this.data);
   },
 
   // call render manually on data;
   render: function(data){
     // debugger
     // empty the list first
-    var sampleItem;
+    var templateString = this.templateString;
     var newChildren = [];
     var toAppend;
 
-    for(var i = 0; i < this.items.length; i++) {
-      var item = this.items[i];
-      sampleItem = item;
-      if(item.parentNode && item.parentNode.dataset.hasOwnProperty('dynamic')) {
-        item.parentNode.removeChild(item);
-      }
-    }
-
-    newChildren = this.data.map(function(dat){
-      var html = utils.t(sampleItem.outerHTML, dat);
+    newChildren = (data ||[]).map(function(dat){
+      var html = utils.t(templateString, dat);
       var template = document.createElement('div');
       template.innerHTML = html;
-      // console.log(template.content)
 
       // Help set the image src template
       var imageTags = template.querySelectorAll('img[data-src]');
@@ -173,10 +176,7 @@ Object.assign(DropDown.prototype, {
   },
 
   destroy: function() {
-    if (!this.hidden) {
-      this.hide();
-    }
-
+    this.hide();
     this.list.removeEventListener('click', this.clickWrapper);
   }
 });
@@ -462,6 +462,8 @@ Object.assign(HookInput.prototype, {
     var self = this;
 
     this.mousedown = function mousedown(e) {
+      if(self.hasRemovedEvents) return;
+
       var mouseEvent = new CustomEvent('mousedown.dl', {
         detail: {
           hook: self,
@@ -474,6 +476,8 @@ Object.assign(HookInput.prototype, {
     }
 
     this.input = function input(e) {
+      if(self.hasRemovedEvents) return;
+
       var inputEvent = new CustomEvent('input.dl', {
         detail: {
           hook: self,
@@ -487,10 +491,14 @@ Object.assign(HookInput.prototype, {
     }
 
     this.keyup = function keyup(e) {
+      if(self.hasRemovedEvents) return;
+
       keyEvent(e, 'keyup.dl');
     }
 
     this.keydown = function keydown(e) {
+      if(self.hasRemovedEvents) return;
+
       keyEvent(e, 'keydown.dl');
     }
 
@@ -520,7 +528,8 @@ Object.assign(HookInput.prototype, {
     this.trigger.addEventListener('keydown', this.keydown);
   },
 
-  removeEvents: function(){
+  removeEvents: function() {
+    this.hasRemovedEvents = true;
     this.trigger.removeEventListener('mousedown', this.mousedown);
     this.trigger.removeEventListener('input', this.input);
     this.trigger.removeEventListener('keyup', this.keyup);
@@ -668,14 +677,14 @@ var camelize = function(str) {
 };
 
 var closest = function(thisTag, stopTag) {
-  while(thisTag.tagName !== stopTag && thisTag.tagName !== 'HTML'){
+  while(thisTag && thisTag.tagName !== stopTag && thisTag.tagName !== 'HTML'){
     thisTag = thisTag.parentNode;
   }
   return thisTag;
 };
 
 var isDropDownParts = function(target) {
-  if(target.tagName === 'HTML') { return false; }
+  if(!target || target.tagName === 'HTML') { return false; }
   return (
     target.hasAttribute(DATA_TRIGGER) ||
       target.hasAttribute(DATA_DROPDOWN)
diff --git a/app/assets/javascripts/extensions/custom_event.js.es6 b/app/assets/javascripts/extensions/custom_event.js.es6
new file mode 100644
index 00000000000..abedae4c1c7
--- /dev/null
+++ b/app/assets/javascripts/extensions/custom_event.js.es6
@@ -0,0 +1,12 @@
+/* global CustomEvent */
+/* eslint-disable no-global-assign */
+
+// Custom event support for IE
+CustomEvent = function CustomEvent(event, parameters) {
+  const params = parameters || { bubbles: false, cancelable: false, detail: undefined };
+  const evt = document.createEvent('CustomEvent');
+  evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+  return evt;
+};
+
+CustomEvent.prototype = window.Event.prototype;
diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6
index fff308ec612..859d6515531 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6
@@ -79,7 +79,10 @@
     dispatchInputEvent() {
       // Propogate input change to FilteredSearchDropdownManager
       // so that it can determine which dropdowns to open
-      this.input.dispatchEvent(new Event('input'));
+      this.input.dispatchEvent(new CustomEvent('input', {
+        bubbles: true,
+        cancelable: true,
+      }));
     }
 
     dispatchFormSubmitEvent() {