Added tests

Fixed edge cases with changing value

2 files changed, 22 insertions, 12 deletions

diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6
index a64818497c1..031e4f9b127 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6
@@ -62,18 +62,33 @@
 
       // Get the string to replace
       const selectionStart = input.selectionStart;
-      const { left } = gl.DropdownUtils.getInputSelectionPosition(input);
-      let { right } = gl.DropdownUtils.getInputSelectionPosition(input);
+      let { left, right } = gl.DropdownUtils.getInputSelectionPosition(input);
 
       if (right < 0) {
         right = inputValue.length;
       }
 
-      if (left !== -1) {
-        input.value = `${inputValue.substr(0, left)}${word}${inputValue.substr(right + selectionStart)}`;
-      } else {
-        input.value += word;
+      if (left < 0) {
+        left += 1;
       }
+
+      input.value = `${inputValue.substr(0, left)}${word}${inputValue.substr(right + selectionStart)}`;
+      gl.FilteredSearchDropdownManager.updateInputCaretPosition(selectionStart, input);
+    }
+
+    static updateInputCaretPosition(selectionStart, input) {
+      // Reset the position
+      // Sometimes can end up at end of input
+      input.setSelectionRange(selectionStart, selectionStart);
+
+      const inputValue = input.value;
+      let { right } = gl.DropdownUtils.getInputSelectionPosition(input);
+
+      if (right < 0) {
+        right = inputValue.length;
+      }
+
+      input.setSelectionRange(selectionStart + right, selectionStart + right);
     }
 
     updateCurrentDropdownOffset() {
diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
index f1912a83e81..c7b72b36561 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
@@ -194,17 +194,12 @@
       return usernamesById;
     }
 
-    tokenChange(e) {
+    tokenChange() {
       const dropdown = this.dropdownManager.mapping[this.dropdownManager.currentDropdown];
       const currentDropdownRef = dropdown.reference;
 
       this.setDropdownWrapper();
       currentDropdownRef.dispatchInputEvent();
-
-      if (e.type === 'click') {
-        // If click event, we need to trigger filter
-        this.filteredSearchInput.dispatchEvent(new Event('keyup'));
-      }
     }
   }