fix: avoid editor popup close when open from config popup

lowcoder-org · Dec 8, 2023 · b1e50c4 · b1e50c4
1 parent f606a4c
commit b1e50c4
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 19 deletions.
diff --git a/client/packages/lowcoder/src/app.tsx b/client/packages/lowcoder/src/app.tsx
@@ -159,7 +159,6 @@ class AppIndex extends React.Component<AppIndexProps, any> {
             )}
           </Switch>
         </Router>
-        <CodeEditorTooltipContainer />
       </Wrapper>
     );
   }

diff --git a/client/packages/lowcoder/src/base/codeEditor/codeEditor.tsx b/client/packages/lowcoder/src/base/codeEditor/codeEditor.tsx
@@ -227,6 +227,7 @@ function useCodeMirror(
     ...props,
     showLineNum,
     onChange: handleChange,
+    tooltipContainer: container.current,
   });
   useEffect(() => reconfigure(viewRef.current), [reconfigure]);
   useEffect(() => {
@@ -385,24 +386,26 @@ export function CodeEditor(props: CodeEditorProps) {
   const { expandable = true, ...editorProps } = props;
   const [disabled, setDisabled] = useState(false);
   return (
-    <CodeEditorCommon {...editorProps} editor={editor} disabled={disabled}>
-      <Container
-        styleName={props.styleName}
-        bordered={props.bordered}
-        disabled={disabled}
-        error={props.hasError}
-        ref={editor as MutableRefObject<HTMLDivElement>}
-        enableClickCompName={props.enableClickCompName}
-      >
-        {expandable && (
-          <CodeEditorPanel
-            breadcrumb={[props.label ?? ""]}
-            editor={<CodeEditorForPanel {...props} styleName="window" showLineNum />}
-            onVisibleChange={(visible) => setDisabled(visible)}
-          />
-        )}
-      </Container>
-    </CodeEditorCommon>
+    <CodeEditorTooltipContainer>
+      <CodeEditorCommon {...editorProps} editor={editor} disabled={disabled}>
+        <Container
+          styleName={props.styleName}
+          bordered={props.bordered}
+          disabled={disabled}
+          error={props.hasError}
+          ref={editor as MutableRefObject<HTMLDivElement>}
+          enableClickCompName={props.enableClickCompName}
+        >
+          {expandable && (
+            <CodeEditorPanel
+              breadcrumb={[props.label ?? ""]}
+              editor={<CodeEditorForPanel {...props} styleName="window" showLineNum />}
+              onVisibleChange={(visible) => setDisabled(visible)}
+            />
+          )}
+        </Container>
+      </CodeEditorCommon>
+    </CodeEditorTooltipContainer>
   );
 }
 

diff --git a/client/packages/lowcoder/src/pages/editor/codeEditorPanel.tsx b/client/packages/lowcoder/src/pages/editor/codeEditorPanel.tsx
@@ -127,7 +127,9 @@ export const CodeEditorPanel = (props: {
       zIndex={Layers.codeEditorPanel}
       popupStyle={{ opacity: 1, display: visible ? "block" : "none" }}
       maskClosable={true}
+      onPopupVisibleChange={(visible) => setVisible(visible)}
       afterPopupVisibleChange={(visible) => props.onVisibleChange(visible)}
+      getPopupContainer={(node: any) => node.parentNode.parentNode}
       popup={() => (
         <Draggable
           positionOffset={{ x: "-50%", y: "-50%" }}