Add dropdown offset to match input cursor

app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6

@@ -52,6 +52,10 @@
       this.input.setAttribute(DATA_DROPDOWN_TRIGGER, `#${this.listId}`);
     }
 
+    setOffset(offset = 0) {
+      this.dropdown.style.left = `${offset}px`;
+    }
+
     getCurrentHook() {
       return droplab.hooks.filter(h => h.id === this.hookId)[0];
     }

app/assets/javascripts/filtered_search/filtered_search_manager.js.es6

@@ -99,47 +99,61 @@
     loadDropdown(dropdownName = '') {
       dropdownName = dropdownName.toLowerCase();
 
+      const filterIconPadding = 27;
       const match = gl.FilteredSearchTokenKeys.get().filter(value => value.key === dropdownName)[0];
+      const filteredSearch = document.querySelector('.filtered-search');
 
       if (match && this.currentDropdown !== match.key) {
         console.log(`🦄 load ${match.key} dropdown`);
+
+        const dynamicDropdownPadding = 12;
+        const dropdownOffset = gl.text.getTextWidth(filteredSearch.value) + filterIconPadding + dynamicDropdownPadding;
+
         this.dismissCurrentDropdown();
         this.currentDropdown = match.key;
 
         if (match.key === 'author') {
           if (!dropdownAuthor) {
-            dropdownAuthor = new gl.DropdownAuthor(document.querySelector('#js-dropdown-author'), document.querySelector('.filtered-search'));
+            dropdownAuthor = new gl.DropdownAuthor(document.querySelector('#js-dropdown-author'), filteredSearch);
           }
 
+          dropdownAuthor.setOffset(dropdownOffset);
           dropdownAuthor.render();
         } else if (match.key === 'assignee') {
           if (!dropdownAssignee) {
-            dropdownAssignee = new gl.DropdownAssignee(document.querySelector('#js-dropdown-assignee'), document.querySelector('.filtered-search'));
+            dropdownAssignee = new gl.DropdownAssignee(document.querySelector('#js-dropdown-assignee'), filteredSearch);
           }
 
+          dropdownAssignee.setOffset(dropdownOffset);
           dropdownAssignee.render();
         } else if (match.key === 'milestone') {
           if (!dropdownMilestone) {
-            dropdownMilestone = new gl.DropdownMilestone(document.querySelector('#js-dropdown-milestone'), document.querySelector('.filtered-search'));
+            dropdownMilestone = new gl.DropdownMilestone(document.querySelector('#js-dropdown-milestone'), filteredSearch);
           }
 
+          dropdownMilestone.setOffset(dropdownOffset);
           dropdownMilestone.render();
         } else if (match.key === 'label') {
           if (!dropdownLabel) {
-            dropdownLabel = new gl.DropdownLabel(document.querySelector('#js-dropdown-label'), document.querySelector('.filtered-search'));
+            dropdownLabel = new gl.DropdownLabel(document.querySelector('#js-dropdown-label'), filteredSearch);
           }
 
+          dropdownLabel.setOffset(dropdownOffset);
           dropdownLabel.render();
         }
 
       } else if (!match && this.currentDropdown !== 'hint') {
         console.log('🦄 load hint dropdown');
+
+        const dropdownOffset = gl.text.getTextWidth(filteredSearch.value) + filterIconPadding;
+
         this.dismissCurrentDropdown();
         this.currentDropdown = 'hint';
 
         if (!dropdownHint) {
-          dropdownHint = new gl.DropdownHint(document.querySelector('#js-dropdown-hint'), document.querySelector('.filtered-search'), this.currentDropdown);
+          dropdownHint = new gl.DropdownHint(document.querySelector('#js-dropdown-hint'), filteredSearch, this.currentDropdown);
         }
+        dropdownHint.setOffset(dropdownOffset);
         dropdownHint.render();
       }
     }

app/assets/javascripts/lib/utils/text_utility.js

@@ -17,6 +17,22 @@
     gl.text.replaceRange = function(s, start, end, substitute) {
       return s.substring(0, start) + substitute + s.substring(end);
     };
+    gl.text.getTextWidth = function(text, font) {
+      /**
+      * Uses canvas.measureText to compute and return the width of the given text of given font in pixels.
+      *
+      * @param {String} text The text to be rendered.
+      * @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana").
+      *
+      * @see http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
+      */
+      // re-use canvas object for better performance
+      var canvas = gl.text.getTextWidth.canvas || (gl.text.getTextWidth.canvas = document.createElement("canvas"));
+      var context = canvas.getContext("2d");
+      context.font = font;
+      var metrics = context.measureText(text);
+      return metrics.width;
+    };
     gl.text.selectedText = function(text, textarea) {
       return text.substring(textarea.selectionStart, textarea.selectionEnd);
     };