Prep to fix AutoComplete display in popups

public/scripts/autocomplete/AutoComplete.js

@@ -6,6 +6,7 @@ import { BlankAutoCompleteOption } from './BlankAutoCompleteOption.js';
 // eslint-disable-next-line no-unused-vars
 import { AutoCompleteNameResult } from './AutoCompleteNameResult.js';
 import { AutoCompleteSecondaryNameResult } from './AutoCompleteSecondaryNameResult.js';
+import { Popup, getTopmostModalLayer } from '../popup.js';
 
 /**@readonly*/
 /**@enum {Number}*/
@@ -438,7 +439,7 @@ export class AutoComplete {
             }
             this.dom.append(frag);
             this.updatePosition();
-            document.body.append(this.domWrap);
+            getTopmostModalLayer().append(this.domWrap);
         } else {
             this.domWrap.remove();
         }
@@ -453,7 +454,7 @@ export class AutoComplete {
         if (!this.isShowingDetails && this.isReplaceable) return this.detailsWrap.remove();
         this.detailsDom.innerHTML = '';
         this.detailsDom.append(this.selectedItem?.renderDetails() ?? 'NO ITEM');
-        document.body.append(this.detailsWrap);
+        getTopmostModalLayer().append(this.detailsWrap);
         this.updateDetailsPositionDebounced();
     }
 
@@ -469,7 +470,7 @@ export class AutoComplete {
             const rect = {};
             rect[AUTOCOMPLETE_WIDTH.INPUT] = this.textarea.getBoundingClientRect();
             rect[AUTOCOMPLETE_WIDTH.CHAT] = document.querySelector('#sheld').getBoundingClientRect();
-            rect[AUTOCOMPLETE_WIDTH.FULL] = document.body.getBoundingClientRect();
+            rect[AUTOCOMPLETE_WIDTH.FULL] = getTopmostModalLayer().getBoundingClientRect();
             this.domWrap.style.setProperty('--bottom', `${window.innerHeight - rect[AUTOCOMPLETE_WIDTH.INPUT].top}px`);
             this.dom.style.setProperty('--bottom', `${window.innerHeight - rect[AUTOCOMPLETE_WIDTH.INPUT].top}px`);
             this.domWrap.style.bottom = `${window.innerHeight - rect[AUTOCOMPLETE_WIDTH.INPUT].top}px`;
@@ -496,7 +497,7 @@ export class AutoComplete {
                 const rect = {};
                 rect[AUTOCOMPLETE_WIDTH.INPUT] = this.textarea.getBoundingClientRect();
                 rect[AUTOCOMPLETE_WIDTH.CHAT] = document.querySelector('#sheld').getBoundingClientRect();
-                rect[AUTOCOMPLETE_WIDTH.FULL] = document.body.getBoundingClientRect();
+                rect[AUTOCOMPLETE_WIDTH.FULL] = getTopmostModalLayer().getBoundingClientRect();
                 if (this.isReplaceable) {
                     this.detailsWrap.classList.remove('full');
                     const selRect = this.selectedItem.dom.children[0].getBoundingClientRect();
@@ -592,7 +593,7 @@ export class AutoComplete {
             }
             this.clone.style.position = 'fixed';
             this.clone.style.visibility = 'hidden';
-            document.body.append(this.clone);
+            getTopmostModalLayer().append(this.clone);
             const mo = new MutationObserver(muts=>{
                 if (muts.find(it=>Array.from(it.removedNodes).includes(this.textarea))) {
                     this.clone.remove();

public/scripts/popup.js

@@ -374,6 +374,21 @@ export class Popup {
 
         /** @type {{value: any, result: POPUP_RESULT|number?}?} Last popup result */
         lastResult: null,
+
+        /** @returns {boolean} Checks if any modal dialog is open */
+        isDialogOpen() {
+            return Popup.util.popups.length > 0;
+        },
+
+        /**
+         * Returns the topmost modal layer in the document. If there is an open dialog,
+         * it returns the dialog element. Otherwise, it returns the document body.
+         *
+         * @return {HTMLElement} The topmost modal layer element
+         */
+        getTopmostModalLayer() {
+            return getTopmostModalLayer();
+        },
     }
 }
 
@@ -387,6 +402,7 @@ class PopupUtils {
 
 /**
  * Displays a blocking popup with a given content and type
+ *
  * @param {JQuery<HTMLElement>|string|Element} content - Content or text to display in the popup
  * @param {POPUP_TYPE} type
  * @param {string} inputValue - Value to set the input to
@@ -403,6 +419,18 @@ export function callGenericPopup(content, type, inputValue = '', popupOptions =
     return popup.show();
 }
 
+/**
+ * Returns the topmost modal layer in the document. If there is an open dialog,
+ * it returns the dialog element. Otherwise, it returns the document body.
+ *
+ * @return {HTMLElement} The topmost modal layer element
+ */
+export function getTopmostModalLayer() {
+    const dlg = Array.from(document.querySelectorAll('dialog[open]:not([closing])')).pop();
+    if (dlg instanceof HTMLElement) return dlg;
+    return document.body;
+}
+
 /**
  * Fixes the issue with toastr not displaying on top of the dialog by moving the toastr container inside the dialog or back to the main body
  */