fix tooltip position when editor is placed in new stacking context (#5853)

* fix tooltip position when editor is placed in new stacking context

* pin typescript version until we update types

Author: nightwing

demo/kitchen-sink/demo.js

@@ -597,10 +597,15 @@ function openTestDialog(animateHeight) {
         window.dialogEditor.destroy();
     var editor = ace.edit(null, {
         value: "test editor", 
-        mode: "ace/mode/javascript"
+        mode: "ace/mode/javascript",
+        enableBasicAutocompletion: true
     });
     window.dialogEditor = editor;
 
+    editor.completer.parentNode = editor.container;
+    if (window.languageProvider)
+        window.languageProvider.registerEditor(editor);
+
     var dialog = dom.buildDom(["div", {
         style: "transition: all 1s; position: fixed; z-index: 100000;"
           + "background: darkblue; border: solid 1px black; display: flex; flex-direction: column"

package.json

@@ -21,7 +21,7 @@
         "eslint": "^8.20.0",
         "istanbul": "^0.4.5",
         "standard-version": "^9.3.2",
-        "typescript": "^5.6.3"
+        "typescript": "5.8.3"
     },
     "mappings": {
         "ace": "."

src/autocomplete/popup.js

@@ -370,24 +370,27 @@ class AcePopup {
                 renderer.$maxPixelHeight = null;
             }
 
+            el.style.display = "";
+            var rootRect = el.offsetParent && el.offsetParent.getBoundingClientRect();
+            
 
             if (anchor === "top") {
                 el.style.top = "";
-                el.style.bottom = (screenHeight + scrollBarSize - dims.bottom) + "px";
+                el.style.bottom = (screenHeight + scrollBarSize - dims.bottom)
+                    - (rootRect ? screenHeight + scrollBarSize - rootRect.bottom : 0)+ "px";
                 popup.isTopdown = false;
             } else {
-                el.style.top = dims.top + "px";
+                el.style.top = (dims.top - (rootRect ? rootRect.top : 0)) + "px";
                 el.style.bottom = "";
                 popup.isTopdown = true;
             }
 
-            el.style.display = "";
 
             var left = pos.left;
             if (left + el.offsetWidth > screenWidth)
                 left = screenWidth - el.offsetWidth;
 
-            el.style.left = left + "px";
+            el.style.left = (left - (rootRect ? rootRect.left : 0)) + "px";
             el.style.right = "";
 
             if (!popup.isOpen) {
@@ -469,7 +472,7 @@ dom.importCssString(`
     width: 300px;
     z-index: 200000;
     border: 1px lightgray solid;
-    position: fixed;
+    position: absolute;
     box-shadow: 2px 3px 5px rgba(0,0,0,.2);
     line-height: 1.4;
     background: #fefefe;

src/css/editor-css.js

@@ -460,7 +460,7 @@ module.exports = `
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
     color: black;
     padding: 3px 4px;
-    position: fixed;
+    position: absolute;
     z-index: 999999;
     box-sizing: border-box;
     cursor: default;

src/tooltip.js

@@ -56,8 +56,10 @@ class Tooltip {
      * @param {Number} y
      **/
     setPosition(x, y) {
-        this.getElement().style.left = x + "px";
-        this.getElement().style.top = y + "px";
+        var el = this.getElement();
+        var rootRect = el.offsetParent && el.offsetParent.getBoundingClientRect();
+        el.style.left = x - (rootRect ? rootRect.left : 0) + "px";
+        el.style.top = y - (rootRect ? rootRect.top : 0) + "px";
     }
 
     /**