DEV: uses popper for autocomplete (#11201)

app/assets/javascripts/discourse/app/lib/autocomplete.js

@@ -2,6 +2,7 @@ import { cancel, later } from "@ember/runloop";
 import { caretPosition, setCaretPosition } from "discourse/lib/utilities";
 import { INPUT_DELAY } from "discourse-common/config/environment";
 import Site from "discourse/models/site";
+import { createPopper } from "@popperjs/core";
 import discourseDebounce from "discourse-common/lib/debounce";
 import { iconHTML } from "discourse-common/lib/icon-library";
 
@@ -94,7 +95,7 @@ export default function (options) {
   let prevTerm = null;
 
   // input is handled differently
-  const isInput = this[0].tagName === "INPUT" && !options.treatAsTextarea;
+  const isInput = me[0].tagName === "INPUT" && !options.treatAsTextarea;
   let inputSelectedItems = [];
 
   function closeAutocomplete() {
@@ -108,7 +109,7 @@ export default function (options) {
   }
 
   function addInputSelectedItem(item, triggerChangeCallback) {
-    var transformed,
+    let transformed,
       transformedItem = item;
 
     if (options.transformComplete) {
@@ -164,7 +165,7 @@ export default function (options) {
       });
   }
 
-  var completeTerm = function (term) {
+  let completeTerm = function (term) {
     if (term) {
       if (isInput) {
         me.val("");
@@ -178,7 +179,7 @@ export default function (options) {
         }
 
         if (term) {
-          var text = me.val();
+          let text = me.val();
           text =
             text.substring(0, completeStart) +
             (options.key || "") +
@@ -225,7 +226,7 @@ export default function (options) {
       options.updateData ? this.attr("name") : this.attr("name") + "-renamed"
     );
 
-    var vals = this.val().split(",");
+    let vals = this.val().split(",");
     vals.forEach((x) => {
       if (x !== "") {
         if (options.reverseTransform) {
@@ -274,7 +275,7 @@ export default function (options) {
 
     div = $(options.template({ options: autocompleteOptions }));
 
-    var ul = div.find("ul");
+    let ul = div.find("ul");
     selectedOption = 0;
     markSelected();
     ul.find("li").click(function () {
@@ -285,31 +286,6 @@ export default function (options) {
       }
       return false;
     });
-    var pos = null;
-    var vOffset = 0;
-    var hOffset = 0;
-
-    if (isInput) {
-      pos = {
-        left: 0,
-        top: 0,
-      };
-      vOffset = BELOW;
-      hOffset = 0;
-    } else {
-      pos = me.caretPosition({
-        pos: completeStart + 1,
-      });
-
-      hOffset = 10;
-      if (options.treatAsTextarea) {
-        vOffset = -32;
-      }
-    }
-
-    div.css({
-      left: "-1000px",
-    });
 
     if (options.appendSelector) {
       me.parents(options.appendSelector).append(div);
@@ -317,6 +293,28 @@ export default function (options) {
       me.parent().append(div);
     }
 
+    if (isInput || options.treatAsTextarea) {
+      return createPopper(me[0], div[0], {
+        placement: "auto-start",
+        strategy: "fixed",
+      });
+    }
+
+    let vOffset = 0;
+    let hOffset = 0;
+    let pos = me.caretPosition({
+      pos: completeStart + 1,
+    });
+
+    hOffset = 10;
+    if (options.treatAsTextarea) {
+      vOffset = -32;
+    }
+
+    div.css({
+      left: "-1000px",
+    });
+
     if (!isInput && !options.treatAsTextarea) {
       vOffset = div.height();
 
@@ -339,9 +337,9 @@ export default function (options) {
       }
     }
 
-    var mePos = me.position();
+    let mePos = me.position();
 
-    var borderTop = parseInt(me.css("border-top-width"), 10) || 0;
+    let borderTop = parseInt(me.css("border-top-width"), 10) || 0;
 
     let left = mePos.left + pos.left + hOffset;
     if (left < 0) {
@@ -451,7 +449,7 @@ export default function (options) {
 
     if (completeStart === null && cp > 0) {
       if (key === options.key) {
-        var prevChar = me.val().charAt(cp - 2);
+        let prevChar = me.val().charAt(cp - 2);
         if (
           checkTriggerRule() &&
           (!prevChar || allowedLettersRegex.test(prevChar))
@@ -467,7 +465,7 @@ export default function (options) {
   }
 
   $(this).on("keydown.autocomplete", function (e) {
-    var c, i, initial, prev, prevIsGood, stopFound, term, total, userToComplete;
+    let c, i, initial, prev, prevIsGood, stopFound, term, total, userToComplete;
     let cp;
 
     if (e.ctrlKey || e.altKey || e.metaKey) {