Resolve "Frontend for clarifying the usefulness of the search bar"

1 files changed, 355 insertions, 233 deletions

diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index 8d231e6c405..cbc05b229cb 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, no-underscore-dangle, no-var, one-var, one-var-declaration-per-line, max-len, vars-on-top, wrap-iife, no-unused-vars, quotes, no-shadow, no-cond-assign, prefer-arrow-callback, no-return-assign, no-else-return, camelcase, comma-dangle, no-lonely-if, guard-for-in, no-restricted-syntax, consistent-return, prefer-template, no-param-reassign, no-loop-func */
+/* eslint-disable func-names, no-underscore-dangle, no-var, one-var, one-var-declaration-per-line, max-len, vars-on-top, wrap-iife, no-unused-vars, no-shadow, no-cond-assign, prefer-arrow-callback, no-return-assign, no-else-return, camelcase, no-lonely-if, guard-for-in, no-restricted-syntax, consistent-return, prefer-template, no-param-reassign, no-loop-func */
 /* global fuzzaldrinPlus */
 
 import $ from 'jquery';
@@ -19,32 +19,42 @@ GitLabDropdownInput = (function() {
     this.fieldName = this.options.fieldName || 'field-name';
     $inputContainer = this.input.parent();
     $clearButton = $inputContainer.find('.js-dropdown-input-clear');
-    $clearButton.on('click', (function(_this) {
-      // Clear click
-      return function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        return _this.input.val('').trigger('input').focus();
-      };
-    })(this));
+    $clearButton.on(
+      'click',
+      (function(_this) {
+        // Clear click
+        return function(e) {
+          e.preventDefault();
+          e.stopPropagation();
+          return _this.input
+            .val('')
+            .trigger('input')
+            .focus();
+        };
+      })(this),
+    );
 
     this.input
-    .on('keydown', function (e) {
-      var keyCode = e.which;
-      if (keyCode === 13 && !options.elIsInput) {
-        e.preventDefault();
-      }
-    })
-    .on('input', function(e) {
-      var val = e.currentTarget.value || _this.options.inputFieldName;
-      val = val.split(' ').join('-') // replaces space with dash
-        .replace(/[^a-zA-Z0-9 -]/g, '').toLowerCase() // replace non alphanumeric
-        .replace(/(-)\1+/g, '-'); // replace repeated dashes
-      _this.cb(_this.options.fieldName, val, {}, true);
-      _this.input.closest('.dropdown')
-        .find('.dropdown-toggle-text')
-        .text(val);
-    });
+      .on('keydown', function(e) {
+        var keyCode = e.which;
+        if (keyCode === 13 && !options.elIsInput) {
+          e.preventDefault();
+        }
+      })
+      .on('input', function(e) {
+        var val = e.currentTarget.value || _this.options.inputFieldName;
+        val = val
+          .split(' ')
+          .join('-') // replaces space with dash
+          .replace(/[^a-zA-Z0-9 -]/g, '')
+          .toLowerCase() // replace non alphanumeric
+          .replace(/(-)\1+/g, '-'); // replace repeated dashes
+        _this.cb(_this.options.fieldName, val, {}, true);
+        _this.input
+          .closest('.dropdown')
+          .find('.dropdown-toggle-text')
+          .text(val);
+      });
   }
 
   GitLabDropdownInput.prototype.onInput = function(cb) {
@@ -61,7 +71,7 @@ GitLabDropdownFilter = (function() {
 
   ARROW_KEY_CODES = [38, 40];
 
-  HAS_VALUE_CLASS = "has-value";
+  HAS_VALUE_CLASS = 'has-value';
 
   function GitLabDropdownFilter(input, options) {
     var $clearButton, $inputContainer, ref, timeout;
@@ -70,44 +80,59 @@ GitLabDropdownFilter = (function() {
     this.filterInputBlur = (ref = this.options.filterInputBlur) != null ? ref : true;
     $inputContainer = this.input.parent();
     $clearButton = $inputContainer.find('.js-dropdown-input-clear');
-    $clearButton.on('click', (function(_this) {
-      // Clear click
-      return function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        return _this.input.val('').trigger('input').focus();
-      };
-    })(this));
+    $clearButton.on(
+      'click',
+      (function(_this) {
+        // Clear click
+        return function(e) {
+          e.preventDefault();
+          e.stopPropagation();
+          return _this.input
+            .val('')
+            .trigger('input')
+            .focus();
+        };
+      })(this),
+    );
     // Key events
-    timeout = "";
+    timeout = '';
     this.input
-      .on('keydown', function (e) {
+      .on('keydown', function(e) {
         var keyCode = e.which;
         if (keyCode === 13 && !options.elIsInput) {
           e.preventDefault();
         }
       })
-      .on('input', function() {
-        if (this.input.val() !== "" && !$inputContainer.hasClass(HAS_VALUE_CLASS)) {
-          $inputContainer.addClass(HAS_VALUE_CLASS);
-        } else if (this.input.val() === "" && $inputContainer.hasClass(HAS_VALUE_CLASS)) {
-          $inputContainer.removeClass(HAS_VALUE_CLASS);
-        }
-        // Only filter asynchronously only if option remote is set
-        if (this.options.remote) {
-          clearTimeout(timeout);
-          return timeout = setTimeout(function() {
-            $inputContainer.parent().addClass('is-loading');
-
-            return this.options.query(this.input.val(), function(data) {
-              $inputContainer.parent().removeClass('is-loading');
-              return this.options.callback(data);
-            }.bind(this));
-          }.bind(this), 250);
-        } else {
-          return this.filter(this.input.val());
-        }
-      }.bind(this));
+      .on(
+        'input',
+        function() {
+          if (this.input.val() !== '' && !$inputContainer.hasClass(HAS_VALUE_CLASS)) {
+            $inputContainer.addClass(HAS_VALUE_CLASS);
+          } else if (this.input.val() === '' && $inputContainer.hasClass(HAS_VALUE_CLASS)) {
+            $inputContainer.removeClass(HAS_VALUE_CLASS);
+          }
+          // Only filter asynchronously only if option remote is set
+          if (this.options.remote) {
+            clearTimeout(timeout);
+            return (timeout = setTimeout(
+              function() {
+                $inputContainer.parent().addClass('is-loading');
+
+                return this.options.query(
+                  this.input.val(),
+                  function(data) {
+                    $inputContainer.parent().removeClass('is-loading');
+                    return this.options.callback(data);
+                  }.bind(this),
+                );
+              }.bind(this),
+              250,
+            ));
+          } else {
+            return this.filter(this.input.val());
+          }
+        }.bind(this),
+      );
   }
 
   GitLabDropdownFilter.prototype.shouldBlur = function(keyCode) {
@@ -120,7 +145,7 @@ GitLabDropdownFilter = (function() {
       this.options.onFilter(search_text);
     }
     data = this.options.data();
-    if ((data != null) && !this.options.filterByText) {
+    if (data != null && !this.options.filterByText) {
       results = data;
       if (search_text !== '') {
         // When data is an array of objects therefore [object Array] e.g.
@@ -130,7 +155,7 @@ GitLabDropdownFilter = (function() {
         // ]
         if (_.isArray(data)) {
           results = fuzzaldrinPlus.filter(data, search_text, {
-            key: this.options.keys
+            key: this.options.keys,
           });
         } else {
           // If data is grouped therefore an [object Object]. e.g.
@@ -149,7 +174,7 @@ GitLabDropdownFilter = (function() {
             for (key in data) {
               group = data[key];
               tmp = fuzzaldrinPlus.filter(group, search_text, {
-                key: this.options.keys
+                key: this.options.keys,
               });
               if (tmp.length) {
                 results[key] = tmp.map(function(item) {
@@ -180,7 +205,10 @@ GitLabDropdownFilter = (function() {
         elements.show().removeClass('option-hidden');
       }
 
-      elements.parent().find('.dropdown-menu-empty-item').toggleClass('hidden', elements.is(':visible'));
+      elements
+        .parent()
+        .find('.dropdown-menu-empty-item')
+        .toggleClass('hidden', elements.is(':visible'));
     }
   };
 
@@ -194,23 +222,26 @@ GitLabDropdownRemote = (function() {
   }
 
   GitLabDropdownRemote.prototype.execute = function() {
-    if (typeof this.dataEndpoint === "string") {
+    if (typeof this.dataEndpoint === 'string') {
       return this.fetchData();
-    } else if (typeof this.dataEndpoint === "function") {
+    } else if (typeof this.dataEndpoint === 'function') {
       if (this.options.beforeSend) {
         this.options.beforeSend();
       }
-      return this.dataEndpoint("", (function(_this) {
-        // Fetch the data by calling the data funcfion
-        return function(data) {
-          if (_this.options.success) {
-            _this.options.success(data);
-          }
-          if (_this.options.beforeSend) {
-            return _this.options.beforeSend();
-          }
-        };
-      })(this));
+      return this.dataEndpoint(
+        '',
+        (function(_this) {
+          // Fetch the data by calling the data funcfion
+          return function(data) {
+            if (_this.options.success) {
+              _this.options.success(data);
+            }
+            if (_this.options.beforeSend) {
+              return _this.options.beforeSend();
+            }
+          };
+        })(this),
+      );
     }
   };
 
@@ -220,33 +251,41 @@ GitLabDropdownRemote = (function() {
     }
 
     // Fetch the data through ajax if the data is a string
-    return axios.get(this.dataEndpoint)
-      .then(({ data }) => {
-        if (this.options.success) {
-          return this.options.success(data);
-        }
-      });
+    return axios.get(this.dataEndpoint).then(({ data }) => {
+      if (this.options.success) {
+        return this.options.success(data);
+      }
+    });
   };
 
   return GitLabDropdownRemote;
 })();
 
 GitLabDropdown = (function() {
-  var ACTIVE_CLASS, FILTER_INPUT, NO_FILTER_INPUT, INDETERMINATE_CLASS, LOADING_CLASS, PAGE_TWO_CLASS, NON_SELECTABLE_CLASSES, SELECTABLE_CLASSES, CURSOR_SELECT_SCROLL_PADDING, currentIndex;
+  var ACTIVE_CLASS,
+    FILTER_INPUT,
+    NO_FILTER_INPUT,
+    INDETERMINATE_CLASS,
+    LOADING_CLASS,
+    PAGE_TWO_CLASS,
+    NON_SELECTABLE_CLASSES,
+    SELECTABLE_CLASSES,
+    CURSOR_SELECT_SCROLL_PADDING,
+    currentIndex;
 
-  LOADING_CLASS = "is-loading";
+  LOADING_CLASS = 'is-loading';
 
-  PAGE_TWO_CLASS = "is-page-two";
+  PAGE_TWO_CLASS = 'is-page-two';
 
-  ACTIVE_CLASS = "is-active";
+  ACTIVE_CLASS = 'is-active';
 
-  INDETERMINATE_CLASS = "is-indeterminate";
+  INDETERMINATE_CLASS = 'is-indeterminate';
 
   currentIndex = -1;
 
   NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-item';
 
-  SELECTABLE_CLASSES = ".dropdown-content li:not(" + NON_SELECTABLE_CLASSES + ", .option-hidden)";
+  SELECTABLE_CLASSES = '.dropdown-content li:not(' + NON_SELECTABLE_CLASSES + ', .option-hidden)';
 
   CURSOR_SELECT_SCROLL_PADDING = 5;
 
@@ -263,15 +302,15 @@ GitLabDropdown = (function() {
     this.opened = this.opened.bind(this);
     this.shouldPropagate = this.shouldPropagate.bind(this);
     self = this;
-    selector = $(this.el).data("target");
+    selector = $(this.el).data('target');
     this.dropdown = selector != null ? $(selector) : $(this.el).parent();
     // Set Defaults
     this.filterInput = this.options.filterInput || this.getElement(FILTER_INPUT);
     this.noFilterInput = this.options.noFilterInput || this.getElement(NO_FILTER_INPUT);
     this.highlight = !!this.options.highlight;
-    this.filterInputBlur = this.options.filterInputBlur != null
-      ? this.options.filterInputBlur
-      : true;
+    this.icon = !!this.options.icon;
+    this.filterInputBlur =
+      this.options.filterInputBlur != null ? this.options.filterInputBlur : true;
     // If no input is passed create a default one
     self = this;
     // If selector was passed
@@ -296,11 +335,17 @@ GitLabDropdown = (function() {
               _this.fullData = data;
               _this.parseData(_this.fullData);
               _this.focusTextInput();
-              if (_this.options.filterable && _this.filter && _this.filter.input && _this.filter.input.val() && _this.filter.input.val().trim() !== '') {
+              if (
+                _this.options.filterable &&
+                _this.filter &&
+                _this.filter.input &&
+                _this.filter.input.val() &&
+                _this.filter.input.val().trim() !== ''
+              ) {
                 return _this.filter.input.trigger('input');
               }
             };
-          // Remote data
+            // Remote data
           })(this),
           instance: this,
         });
@@ -325,7 +370,7 @@ GitLabDropdown = (function() {
           return function() {
             selector = '.dropdown-content li:not(' + NON_SELECTABLE_CLASSES + ')';
             if (_this.dropdown.find('.dropdown-toggle-page').length) {
-              selector = ".dropdown-page-one " + selector;
+              selector = '.dropdown-page-one ' + selector;
             }
             return $(selector, this.instance.dropdown);
           };
@@ -341,80 +386,97 @@ GitLabDropdown = (function() {
             if (_this.filterInput.val() !== '') {
               selector = SELECTABLE_CLASSES;
               if (_this.dropdown.find('.dropdown-toggle-page').length) {
-                selector = ".dropdown-page-one " + selector;
+                selector = '.dropdown-page-one ' + selector;
               }
               if ($(_this.el).is('input')) {
                 currentIndex = -1;
               } else {
-                $(selector, _this.dropdown).first().find('a').addClass('is-focused');
+                $(selector, _this.dropdown)
+                  .first()
+                  .find('a')
+                  .addClass('is-focused');
                 currentIndex = 0;
               }
             }
           };
-        })(this)
+        })(this),
       });
     }
     // Event listeners
-    this.dropdown.on("shown.bs.dropdown", this.opened);
-    this.dropdown.on("hidden.bs.dropdown", this.hidden);
-    $(this.el).on("update.label", this.updateLabel);
-    this.dropdown.on("click", ".dropdown-menu, .dropdown-menu-close", this.shouldPropagate);
-    this.dropdown.on('keyup', (function(_this) {
-      return function(e) {
-        // Escape key
-        if (e.which === 27) {
-          return $('.dropdown-menu-close', _this.dropdown).trigger('click');
-        }
-      };
-    })(this));
-    this.dropdown.on('blur', 'a', (function(_this) {
-      return function(e) {
-        var $dropdownMenu, $relatedTarget;
-        if (e.relatedTarget != null) {
-          $relatedTarget = $(e.relatedTarget);
-          $dropdownMenu = $relatedTarget.closest('.dropdown-menu');
-          if ($dropdownMenu.length === 0) {
-            return _this.dropdown.removeClass('show');
+    this.dropdown.on('shown.bs.dropdown', this.opened);
+    this.dropdown.on('hidden.bs.dropdown', this.hidden);
+    $(this.el).on('update.label', this.updateLabel);
+    this.dropdown.on('click', '.dropdown-menu, .dropdown-menu-close', this.shouldPropagate);
+    this.dropdown.on(
+      'keyup',
+      (function(_this) {
+        return function(e) {
+          // Escape key
+          if (e.which === 27) {
+            return $('.dropdown-menu-close', _this.dropdown).trigger('click');
           }
-        }
-      };
-    })(this));
-    if (this.dropdown.find(".dropdown-toggle-page").length) {
-      this.dropdown.find(".dropdown-toggle-page, .dropdown-menu-back").on("click", (function(_this) {
+        };
+      })(this),
+    );
+    this.dropdown.on(
+      'blur',
+      'a',
+      (function(_this) {
         return function(e) {
-          e.preventDefault();
-          e.stopPropagation();
-          return _this.togglePage();
+          var $dropdownMenu, $relatedTarget;
+          if (e.relatedTarget != null) {
+            $relatedTarget = $(e.relatedTarget);
+            $dropdownMenu = $relatedTarget.closest('.dropdown-menu');
+            if ($dropdownMenu.length === 0) {
+              return _this.dropdown.removeClass('show');
+            }
+          }
         };
-      })(this));
+      })(this),
+    );
+    if (this.dropdown.find('.dropdown-toggle-page').length) {
+      this.dropdown.find('.dropdown-toggle-page, .dropdown-menu-back').on(
+        'click',
+        (function(_this) {
+          return function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            return _this.togglePage();
+          };
+        })(this),
+      );
     }
     if (this.options.selectable) {
-      selector = ".dropdown-content a";
-      if (this.dropdown.find(".dropdown-toggle-page").length) {
-        selector = ".dropdown-page-one .dropdown-content a";
+      selector = '.dropdown-content a';
+      if (this.dropdown.find('.dropdown-toggle-page').length) {
+        selector = '.dropdown-page-one .dropdown-content a';
       }
-      this.dropdown.on("click", selector, function(e) {
-        var $el, selected, selectedObj, isMarking;
-        $el = $(e.currentTarget);
-        selected = self.rowClicked($el);
-        selectedObj = selected ? selected[0] : null;
-        isMarking = selected ? selected[1] : null;
-        if (this.options.clicked) {
-          this.options.clicked.call(this, {
-            selectedObj,
-            $el,
-            e,
-            isMarking,
-          });
-        }
+      this.dropdown.on(
+        'click',
+        selector,
+        function(e) {
+          var $el, selected, selectedObj, isMarking;
+          $el = $(e.currentTarget);
+          selected = self.rowClicked($el);
+          selectedObj = selected ? selected[0] : null;
+          isMarking = selected ? selected[1] : null;
+          if (this.options.clicked) {
+            this.options.clicked.call(this, {
+              selectedObj,
+              $el,
+              e,
+              isMarking,
+            });
+          }
 
-        // Update label right after all modifications in dropdown has been done
-        if (this.options.toggleLabel) {
-          this.updateLabel(selectedObj, $el, this);
-        }
+          // Update label right after all modifications in dropdown has been done
+          if (this.options.toggleLabel) {
+            this.updateLabel(selectedObj, $el, this);
+          }
 
-        $el.trigger('blur');
-      }.bind(this));
+          $el.trigger('blur');
+        }.bind(this),
+      );
     }
   }
 
@@ -452,10 +514,15 @@ GitLabDropdown = (function() {
         html = [];
         for (name in data) {
           groupData = data[name];
-          html.push(this.renderItem({
-            header: name
-          // Add header for each group
-          }, name));
+          html.push(
+            this.renderItem(
+              {
+                header: name,
+                // Add header for each group
+              },
+              name,
+            ),
+          );
           this.renderData(groupData, name).map(function(item) {
             return html.push(item);
           });
@@ -474,20 +541,25 @@ GitLabDropdown = (function() {
     if (group == null) {
       group = false;
     }
-    return data.map((function(_this) {
-      return function(obj, index) {
-        return _this.renderItem(obj, group, index);
-      };
-    })(this));
+    return data.map(
+      (function(_this) {
+        return function(obj, index) {
+          return _this.renderItem(obj, group, index);
+        };
+      })(this),
+    );
   };
 
   GitLabDropdown.prototype.shouldPropagate = function(e) {
     var $target;
     if (this.options.multiSelect || this.options.shouldPropagate === false) {
       $target = $(e.target);
-      if ($target && !$target.hasClass('dropdown-menu-close') &&
-                     !$target.hasClass('dropdown-menu-close-icon') &&
-                     !$target.data('isLink')) {
+      if (
+        $target &&
+        !$target.hasClass('dropdown-menu-close') &&
+        !$target.hasClass('dropdown-menu-close-icon') &&
+        !$target.data('isLink')
+      ) {
         e.stopPropagation();
         return false;
       } else {
@@ -497,9 +569,11 @@ GitLabDropdown = (function() {
   };
 
   GitLabDropdown.prototype.filteredFullData = function() {
-    return this.fullData.filter(r => typeof r === 'object'
-      && !Object.prototype.hasOwnProperty.call(r, 'beforeDivider')
-      && !Object.prototype.hasOwnProperty.call(r, 'header')
+    return this.fullData.filter(
+      r =>
+        typeof r === 'object' &&
+        !Object.prototype.hasOwnProperty.call(r, 'beforeDivider') &&
+        !Object.prototype.hasOwnProperty.call(r, 'header'),
     );
   };
 
@@ -522,11 +596,16 @@ GitLabDropdown = (function() {
     // matches the correct layout
     const inputValue = this.filterInput.val();
     if (this.fullData && hasMultiSelect && this.options.processData && inputValue.length === 0) {
-      this.options.processData.call(this.options, inputValue, this.filteredFullData(), this.parseData.bind(this));
+      this.options.processData.call(
+        this.options,
+        inputValue,
+        this.filteredFullData(),
+        this.parseData.bind(this),
+      );
     }
 
     contentHtml = $('.dropdown-content', this.dropdown).html();
-    if (this.remote && contentHtml === "") {
+    if (this.remote && contentHtml === '') {
       this.remote.execute();
     } else {
       this.focusTextInput();
@@ -555,11 +634,11 @@ GitLabDropdown = (function() {
     var $input;
     this.resetRows();
     this.removeArrayKeyEvent();
-    $input = this.dropdown.find(".dropdown-input-field");
+    $input = this.dropdown.find('.dropdown-input-field');
     if (this.options.filterable) {
       $input.blur();
     }
-    if (this.dropdown.find(".dropdown-toggle-page").length) {
+    if (this.dropdown.find('.dropdown-toggle-page').length) {
       $('.dropdown-menu', this.dropdown).removeClass(PAGE_TWO_CLASS);
     }
     if (this.options.hidden) {
@@ -601,7 +680,7 @@ GitLabDropdown = (function() {
   GitLabDropdown.prototype.clearMenu = function() {
     var selector;
     selector = '.dropdown-content';
-    if (this.dropdown.find(".dropdown-toggle-page").length) {
+    if (this.dropdown.find('.dropdown-toggle-page').length) {
       if (this.options.containerSelector) {
         selector = this.options.containerSelector;
       } else {
@@ -619,7 +698,7 @@ GitLabDropdown = (function() {
       value = this.options.id ? this.options.id(data) : data.id;
 
       if (value) {
-        value = value.toString().replace(/'/g, '\\\'');
+        value = value.toString().replace(/'/g, "\\'");
       }
     }
 
@@ -676,21 +755,27 @@ GitLabDropdown = (function() {
         text = data.text != null ? data.text : '';
       }
       if (this.highlight) {
-        text = this.highlightTextMatches(text, this.filterInput.val());
+        text = data.template
+          ? this.highlightTemplate(text, data.template)
+          : this.highlightTextMatches(text, this.filterInput.val());
       }
       // Create the list item & the link
       var link = document.createElement('a');
 
       link.href = url;
 
-      if (this.highlight) {
+      if (this.icon) {
+        text = `<span>${text}</span>`;
+        link.classList.add('d-flex', 'align-items-center');
+        link.innerHTML = data.icon ? data.icon + text : text;
+      } else if (this.highlight) {
         link.innerHTML = text;
       } else {
         link.textContent = text;
       }
 
       if (selected) {
-        link.className = 'is-active';
+        link.classList.add('is-active');
       }
 
       if (group) {
@@ -703,17 +788,24 @@ GitLabDropdown = (function() {
     return html;
   };
 
+  GitLabDropdown.prototype.highlightTemplate = function(text, template) {
+    return `"<b>${_.escape(text)}</b>" ${template}`;
+  };
+
   GitLabDropdown.prototype.highlightTextMatches = function(text, term) {
     const occurrences = fuzzaldrinPlus.match(text, term);
     const { indexOf } = [];
 
-    return text.split('').map(function(character, i) {
-      if (indexOf.call(occurrences, i) !== -1) {
-        return "<b>" + character + "</b>";
-      } else {
-        return character;
-      }
-    }).join('');
+    return text
+      .split('')
+      .map(function(character, i) {
+        if (indexOf.call(occurrences, i) !== -1) {
+          return '<b>' + character + '</b>';
+        } else {
+          return character;
+        }
+      })
+      .join('');
   };
 
   GitLabDropdown.prototype.noResults = function() {
@@ -748,13 +840,15 @@ GitLabDropdown = (function() {
     }
 
     field = [];
-    value = this.options.id
-      ? this.options.id(selectedObject, el)
-      : selectedObject.id;
+    value = this.options.id ? this.options.id(selectedObject, el) : selectedObject.id;
     if (isInput) {
       field = $(this.el);
     } else if (value != null) {
-      field = this.dropdown.parent().find("input[name='" + fieldName + "'][value='" + value.toString().replace(/'/g, '\\\'') + "']");
+      field = this.dropdown
+        .parent()
+        .find(
+          "input[name='" + fieldName + "'][value='" + value.toString().replace(/'/g, "\\'") + "']",
+        );
     }
 
     if (this.options.isSelectable && !this.options.isSelectable(selectedObject, el)) {
@@ -780,9 +874,12 @@ GitLabDropdown = (function() {
     } else {
       isMarking = true;
       if (!this.options.multiSelect || el.hasClass('dropdown-clear-active')) {
-        this.dropdown.find("." + ACTIVE_CLASS).removeClass(ACTIVE_CLASS);
+        this.dropdown.find('.' + ACTIVE_CLASS).removeClass(ACTIVE_CLASS);
         if (!isInput) {
-          this.dropdown.parent().find("input[name='" + fieldName + "']").remove();
+          this.dropdown
+            .parent()
+            .find("input[name='" + fieldName + "']")
+            .remove();
         }
       }
       if (field && field.length && value == null) {
@@ -823,13 +920,16 @@ GitLabDropdown = (function() {
       $('input[name="' + fieldName + '"]').remove();
     }
 
-    $input = $('<input>').attr('type', 'hidden').attr('name', fieldName).val(value);
+    $input = $('<input>')
+      .attr('type', 'hidden')
+      .attr('name', fieldName)
+      .val(value);
     if (this.options.inputId != null) {
       $input.attr('id', this.options.inputId);
     }
 
     if (this.options.multiSelect) {
-      Object.keys(selectedObject).forEach((attribute) => {
+      Object.keys(selectedObject).forEach(attribute => {
         $input.attr(`data-${attribute}`, selectedObject[attribute]);
       });
     }
@@ -844,13 +944,13 @@ GitLabDropdown = (function() {
   GitLabDropdown.prototype.selectRowAtIndex = function(index) {
     var $el, selector;
     // If we pass an option index
-    if (typeof index !== "undefined") {
-      selector = SELECTABLE_CLASSES + ":eq(" + index + ") a";
+    if (typeof index !== 'undefined') {
+      selector = SELECTABLE_CLASSES + ':eq(' + index + ') a';
     } else {
-      selector = ".dropdown-content .is-focused";
+      selector = '.dropdown-content .is-focused';
     }
-    if (this.dropdown.find(".dropdown-toggle-page").length) {
-      selector = ".dropdown-page-one " + selector;
+    if (this.dropdown.find('.dropdown-toggle-page').length) {
+      selector = '.dropdown-page-one ' + selector;
     }
     // simulate a click on the first link
     $el = $(selector, this.dropdown);
@@ -867,44 +967,47 @@ GitLabDropdown = (function() {
   GitLabDropdown.prototype.addArrowKeyEvent = function() {
     var $input, ARROW_KEY_CODES, selector;
     ARROW_KEY_CODES = [38, 40];
-    $input = this.dropdown.find(".dropdown-input-field");
+    $input = this.dropdown.find('.dropdown-input-field');
     selector = SELECTABLE_CLASSES;
-    if (this.dropdown.find(".dropdown-toggle-page").length) {
-      selector = ".dropdown-page-one " + selector;
-    }
-    return $('body').on('keydown', (function(_this) {
-      return function(e) {
-        var $listItems, PREV_INDEX, currentKeyCode;
-        currentKeyCode = e.which;
-        if (ARROW_KEY_CODES.indexOf(currentKeyCode) !== -1) {
-          e.preventDefault();
-          e.stopImmediatePropagation();
-          PREV_INDEX = currentIndex;
-          $listItems = $(selector, _this.dropdown);
-          // if @options.filterable
-          //   $input.blur()
-          if (currentKeyCode === 40) {
-            // Move down
-            if (currentIndex < ($listItems.length - 1)) {
-              currentIndex += 1;
+    if (this.dropdown.find('.dropdown-toggle-page').length) {
+      selector = '.dropdown-page-one ' + selector;
+    }
+    return $('body').on(
+      'keydown',
+      (function(_this) {
+        return function(e) {
+          var $listItems, PREV_INDEX, currentKeyCode;
+          currentKeyCode = e.which;
+          if (ARROW_KEY_CODES.indexOf(currentKeyCode) !== -1) {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            PREV_INDEX = currentIndex;
+            $listItems = $(selector, _this.dropdown);
+            // if @options.filterable
+            //   $input.blur()
+            if (currentKeyCode === 40) {
+              // Move down
+              if (currentIndex < $listItems.length - 1) {
+                currentIndex += 1;
+              }
+            } else if (currentKeyCode === 38) {
+              // Move up
+              if (currentIndex > 0) {
+                currentIndex -= 1;
+              }
             }
-          } else if (currentKeyCode === 38) {
-            // Move up
-            if (currentIndex > 0) {
-              currentIndex -= 1;
+            if (currentIndex !== PREV_INDEX) {
+              _this.highlightRowAtIndex($listItems, currentIndex);
             }
+            return false;
           }
-          if (currentIndex !== PREV_INDEX) {
-            _this.highlightRowAtIndex($listItems, currentIndex);
+          if (currentKeyCode === 13 && currentIndex !== -1) {
+            e.preventDefault();
+            _this.selectRowAtIndex();
           }
-          return false;
-        }
-        if (currentKeyCode === 13 && currentIndex !== -1) {
-          e.preventDefault();
-          _this.selectRowAtIndex();
-        }
-      };
-    })(this));
+        };
+      })(this),
+    );
   };
 
   GitLabDropdown.prototype.removeArrayKeyEvent = function() {
@@ -917,12 +1020,25 @@ GitLabDropdown = (function() {
   };
 
   GitLabDropdown.prototype.highlightRowAtIndex = function($listItems, index) {
-    var $dropdownContent, $listItem, dropdownContentBottom, dropdownContentHeight, dropdownContentTop, dropdownScrollTop, listItemBottom, listItemHeight, listItemTop;
+    var $dropdownContent,
+      $listItem,
+      dropdownContentBottom,
+      dropdownContentHeight,
+      dropdownContentTop,
+      dropdownScrollTop,
+      listItemBottom,
+      listItemHeight,
+      listItemTop;
+
+    if (!$listItems) {
+      $listItems = $(SELECTABLE_CLASSES, this.dropdown);
+    }
+
     // Remove the class for the previously focused row
     $('.is-focused', this.dropdown).removeClass('is-focused');
     // Update the class for the row at the specific index
     $listItem = $listItems.eq(index);
-    $listItem.find('a:first-child').addClass("is-focused");
+    $listItem.find('a:first-child').addClass('is-focused');
     // Dropdown content scroll area
     $dropdownContent = $listItem.closest('.dropdown-content');
     dropdownScrollTop = $dropdownContent.scrollTop();
@@ -936,15 +1052,19 @@ GitLabDropdown = (function() {
     if (!index) {
       // Scroll the dropdown content to the top
       $dropdownContent.scrollTop(0);
-    } else if (index === ($listItems.length - 1)) {
+    } else if (index === $listItems.length - 1) {
       // Scroll the dropdown content to the bottom
       $dropdownContent.scrollTop($dropdownContent.prop('scrollHeight'));
-    } else if (listItemBottom > (dropdownContentBottom + dropdownScrollTop)) {
+    } else if (listItemBottom > dropdownContentBottom + dropdownScrollTop) {
       // Scroll the dropdown content down
-      $dropdownContent.scrollTop(listItemBottom - dropdownContentBottom + CURSOR_SELECT_SCROLL_PADDING);
-    } else if (listItemTop < (dropdownContentTop + dropdownScrollTop)) {
+      $dropdownContent.scrollTop(
+        listItemBottom - dropdownContentBottom + CURSOR_SELECT_SCROLL_PADDING,
+      );
+    } else if (listItemTop < dropdownContentTop + dropdownScrollTop) {
       // Scroll the dropdown content up
-      return $dropdownContent.scrollTop(listItemTop - dropdownContentTop - CURSOR_SELECT_SCROLL_PADDING);
+      return $dropdownContent.scrollTop(
+        listItemTop - dropdownContentTop - CURSOR_SELECT_SCROLL_PADDING,
+      );
     }
   };
 
@@ -965,7 +1085,9 @@ GitLabDropdown = (function() {
       toggleText = this.options.updateLabel;
     }
 
-    return $(this.el).find(".dropdown-toggle-text").text(toggleText);
+    return $(this.el)
+      .find('.dropdown-toggle-text')
+      .text(toggleText);
   };
 
   GitLabDropdown.prototype.clearField = function(field, isInput) {