Fix ace editor popover in action editor (#28525)

* Move `ace` element ID to constants

* Close ace popover before opening the save modal

* Change name

* Workaround type warning

frontend/src/metabase/actions/containers/ActionCreator/ActionCreator.tsx

@@ -29,6 +29,7 @@ import type Metadata from "metabase-lib/metadata/Metadata";
 import { isSavedAction } from "../../utils";
 import ActionContext, { useActionContext } from "./ActionContext";
 import ActionCreatorView from "./ActionCreatorView";
+import { ACE_ELEMENT_ID } from "./QueryActionEditor";
 import CreateActionForm, {
   FormValues as CreateActionFormValues,
 } from "./CreateActionForm";
@@ -95,7 +96,7 @@ function ActionCreator({
     renderEditorBody,
   } = useActionContext();
 
-  const [showSaveModal, setShowSaveModal] = useState(false);
+  const [isSaveModalShown, setShowSaveModal] = useState(false);
 
   const isEditable = isNew || model.canWriteActions();
 
@@ -131,9 +132,14 @@ function ActionCreator({
     }
   };
 
+  const showSaveModal = () => {
+    ensureAceEditorClosed();
+    setShowSaveModal(true);
+  };
+
   const handleClickSave = () => {
     if (isNew) {
-      setShowSaveModal(true);
+      showSaveModal();
     } else {
       handleUpdate();
       onClose?.();
@@ -158,7 +164,7 @@ function ActionCreator({
       >
         {renderEditorBody({ isEditable })}
       </ActionCreatorView>
-      {showSaveModal && (
+      {isSaveModalShown && (
         <Modal title={t`New Action`} onClose={handleCloseNewActionModal}>
           <CreateActionForm
             initialValues={{
@@ -175,6 +181,14 @@ function ActionCreator({
   );
 }
 
+function ensureAceEditorClosed() {
+  // @ts-expect-error — `ace` isn't typed yet
+  const editor = window.ace?.edit(ACE_ELEMENT_ID);
+  if (editor) {
+    editor.completer.popup.hide();
+  }
+}
+
 function ActionCreatorWithContext({
   initialAction,
   metadata,

frontend/src/metabase/actions/containers/ActionCreator/QueryActionEditor.tsx

 import React from "react";
 
 import NativeQueryEditor from "metabase/query_builder/components/NativeQueryEditor";
+import { ACE_ELEMENT_ID } from "metabase/query_builder/components/NativeQueryEditor/constants";
 
 import type NativeQuery from "metabase-lib/queries/NativeQuery";
 
@@ -31,4 +32,6 @@ function QueryActionEditor({
   );
 }
 
+export { ACE_ELEMENT_ID };
+
 export default QueryActionEditor;

frontend/src/metabase/query_builder/components/NativeQueryEditor.jsx

@@ -39,7 +39,11 @@ import NativeQueryEditorSidebar from "./NativeQueryEditor/NativeQueryEditorSideb
 import VisibilityToggler from "./NativeQueryEditor/VisibilityToggler";
 import RightClickPopover from "./NativeQueryEditor/RightClickPopover";
 import DataSourceSelectors from "./NativeQueryEditor/DataSourceSelectors";
-import { SCROLL_MARGIN, MIN_HEIGHT_LINES } from "./NativeQueryEditor/constants";
+import {
+  ACE_ELEMENT_ID,
+  SCROLL_MARGIN,
+  MIN_HEIGHT_LINES,
+} from "./NativeQueryEditor/constants";
 import {
   calcInitialEditorHeight,
   getEditorLineHeight,
@@ -578,7 +582,7 @@ class NativeQueryEditor extends Component {
             this._editor.resize();
           }}
         >
-          <div className="flex-full" id="id_sql" ref={this.editor} />
+          <div className="flex-full" id={ACE_ELEMENT_ID} ref={this.editor} />
 
           <RightClickPopover
             isOpen={this.state.isSelectedTextPopoverOpen}

frontend/src/metabase/query_builder/components/NativeQueryEditor/constants.ts

 export const SCROLL_MARGIN = 8;
 export const MIN_HEIGHT_LINES = 15;
+export const ACE_ELEMENT_ID = "id_sql";