fix(ace-editor-popover): main AntD popover closes when clicking autocomplete suggestions in Ace Editor

superset-frontend/packages/superset-ui-core/src/components/AsyncAceEditor/index.tsx

@@ -26,6 +26,7 @@ import type {
 } from 'brace';
 import type AceEditor from 'react-ace';
 import type { IAceEditorProps } from 'react-ace';
+import type { Ace } from 'ace-builds';
 
 import {
   AsyncEsmComponent,
@@ -207,6 +208,49 @@ export function AsyncAceEditor(
           }
         }, [keywords, setCompleters]);
 
+        // Move autocomplete popup to the nearest parent container with data-ace-container
+        useEffect(() => {
+          const editorInstance = (ref as React.RefObject<AceEditor>)?.current
+            ?.editor;
+          if (!editorInstance) return;
+
+          const moveAutocompleteToContainer = () => {
+            const editorContainer = editorInstance.container;
+            const autocompletePopup =
+              (editorContainer?.querySelector(
+                '.ace_autocomplete',
+              ) as HTMLElement) ||
+              (document.querySelector('.ace_autocomplete') as HTMLElement);
+            if (autocompletePopup) {
+              const targetContainer =
+                editorContainer?.closest('#ace-editor') ||
+                editorContainer?.parentElement;
+              if (targetContainer && targetContainer !== document.body) {
+                targetContainer.appendChild(autocompletePopup);
+                autocompletePopup.setAttribute('data-ace-autocomplete', 'true');
+              }
+            }
+          };
+
+          // Hook into Ace's command execution to detect when autocomplete starts
+          const handleAfterExec = (e: Ace.Operation) => {
+            if (
+              e.command.name &&
+              ['insertstring', 'startAutocomplete'].includes(e.command.name)
+            ) {
+              moveAutocompleteToContainer();
+            }
+          };
+
+          editorInstance.commands.on('afterExec', handleAfterExec);
+
+          return () => {
+            if (editorInstance.commands) {
+              editorInstance.commands.off('afterExec', handleAfterExec);
+            }
+          };
+        }, [ref]);
+
         return (
           <>
             <Global
@@ -288,14 +332,24 @@ export function AsyncAceEditor(
                   border: 1px solid ${token.colorBorderSecondary};
                   box-shadow: ${token.boxShadow};
                   border-radius: ${token.borderRadius}px;
+                  padding: ${token.paddingXS}px ${token.paddingXS}px;
+                }
+
+                .ace_tooltip.ace_doc-tooltip {
+                  display: flex !important;
                 }
 
-                & .tooltip-detail {
+                &&& .tooltip-detail {
+                  display: flex;
+                  justify-content: center;
+                  flex-direction: row;
+                  gap: ${token.paddingXXS}px;
+                  align-items: center;
                   background-color: ${token.colorBgContainer};
                   white-space: pre-wrap;
                   word-break: break-all;
-                  min-width: ${token.sizeXXL * 5}px;
                   max-width: ${token.sizeXXL * 10}px;
+                  font-size: ${token.fontSize}px;
 
                   & .tooltip-detail-head {
                     background-color: ${token.colorBgElevated};
@@ -318,7 +372,9 @@ export function AsyncAceEditor(
 
                   & .tooltip-detail-head,
                   & .tooltip-detail-body {
-                    padding: ${token.padding}px ${token.paddingLG}px;
+                    background-color: ${token.colorBgLayout};
+                    padding: 0px ${token.paddingXXS}px;
+                    border: 1px ${token.colorSplit} solid;
                   }
 
                   & .tooltip-detail-footer {