From 71148c1c90e49e4104a375c937d11bfaa8d92431 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Thu, 7 Dec 2023 12:33:43 +0500
Subject: [PATCH 1/3] fix: avoid editor popup close on selecting suggeston
 using mouse

---
 client/packages/lowcoder/src/pages/editor/codeEditorPanel.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/packages/lowcoder/src/pages/editor/codeEditorPanel.tsx b/client/packages/lowcoder/src/pages/editor/codeEditorPanel.tsx
index ef7a5821d..71bd32f1a 100644
--- a/client/packages/lowcoder/src/pages/editor/codeEditorPanel.tsx
+++ b/client/packages/lowcoder/src/pages/editor/codeEditorPanel.tsx
@@ -127,7 +127,6 @@ 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)}
       popup={() => (
         <Draggable

From f606a4ca0b67415b769c2416c5a754c915c47c53 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Thu, 7 Dec 2023 14:09:10 +0500
Subject: [PATCH 2/3] fix: enable scroll in table columns configs popup

---
 client/packages/lowcoder-design/src/components/option.tsx   | 6 +++++-
 client/packages/lowcoder-design/src/components/popover.tsx  | 4 +++-
 .../src/comps/comps/tableComp/tablePropertyView.tsx         | 1 +
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/client/packages/lowcoder-design/src/components/option.tsx b/client/packages/lowcoder-design/src/components/option.tsx
index 89759b59b..fd822af9f 100644
--- a/client/packages/lowcoder-design/src/components/option.tsx
+++ b/client/packages/lowcoder-design/src/components/option.tsx
@@ -153,8 +153,9 @@ const OptionItem = (props: {
   popoverTitle?: string;
   draggable?: boolean;
   optionExtra?: React.ReactNode;
+  scrollable?: boolean;
 }) => {
-  const { content, config, title, popoverTitle, draggable = true, optionExtra } = props;
+  const { content, config, title, popoverTitle, draggable = true, optionExtra, scrollable } = props;
   const [visible, setVisible] = useState(false);
   const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
     id: config.dataIndex,
@@ -182,6 +183,7 @@ const OptionItem = (props: {
       setVisible={(vis) => {
         setVisible(vis);
       }}
+      scrollable={scrollable}
     >
       {optionRow}
     </SimplePopover>
@@ -204,6 +206,7 @@ function Option<T extends ConstructorToComp<MultiCompConstructor>>(props: {
   optionToolbar?: React.ReactNode;
   headerItem?: React.ReactNode;
   itemExtra?: (comp: T) => React.ReactNode;
+  scrollable?: boolean;
 }) {
   const { items, uniqVal, headerItem, optionToolbar, itemExtra } = props;
   const itemsDistinctValCount = uniqVal
@@ -286,6 +289,7 @@ function Option<T extends ConstructorToComp<MultiCompConstructor>>(props: {
                     title={props.itemTitle(item)}
                     config={{ dataIndex: dataIndex }}
                     optionExtra={optionExtra}
+                    scrollable={props.scrollable}
                   />
                 );
               })}
diff --git a/client/packages/lowcoder-design/src/components/popover.tsx b/client/packages/lowcoder-design/src/components/popover.tsx
index 6b7c35800..2f9167fb2 100644
--- a/client/packages/lowcoder-design/src/components/popover.tsx
+++ b/client/packages/lowcoder-design/src/components/popover.tsx
@@ -51,6 +51,7 @@ const SimplePopover = (props: {
   setVisible?: (vis: boolean) => void;
   children: JSX.Element | React.ReactNode;
   content: JSX.Element | React.ReactNode;
+  scrollable?: boolean;
 }) => {
   const { visible, setVisible } = props;
   const contentWithBox = (
@@ -58,6 +59,7 @@ const SimplePopover = (props: {
       title={props.title}
       onClose={() => setVisible?.(false)}
       content={props.content}
+      scrollable={props.scrollable}
     />
   );
   return (
@@ -66,7 +68,7 @@ const SimplePopover = (props: {
       align={{
         offset: [-12, 0, 0, 0],
       }}
-      destroyTooltipOnHide
+      // destroyTooltipOnHide
       content={contentWithBox}
       trigger="click"
       open={visible}
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
index 14a18e140..cbc4bc11c 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
@@ -390,6 +390,7 @@ function ColumnPropertyView<T extends MultiBaseComp<TableChildrenType>>(props: {
           comp.children.columns.dispatch(action);
         }}
         dataIndex={(column) => column.getView().dataIndex}
+        scrollable={true}
       />
     </>
   );

From b1e50c48f407f8898eae3c2325de64a7ce55d4b2 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Fri, 8 Dec 2023 11:35:22 +0500
Subject: [PATCH 3/3] fix: avoid editor popup close when open from config popup

---
 client/packages/lowcoder/src/app.tsx          |  1 -
 .../src/base/codeEditor/codeEditor.tsx        | 39 ++++++++++---------
 .../src/pages/editor/codeEditorPanel.tsx      |  2 +
 3 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/client/packages/lowcoder/src/app.tsx b/client/packages/lowcoder/src/app.tsx
index 44d65c50a..e05cb576e 100644
--- 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
index fd1844146..0c463e46e 100644
--- 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
index 71bd32f1a..fdb78ce64 100644
--- 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%" }}