Merge branch 'dev' into feat/1578-tags

Author: raheeliftikhar5

client/packages/lowcoder-design/src/components/Modal/handler.tsx

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { memo, useMemo } from "react";
+import { RefObject } from "react";
 
 type ResizeHandleAxis = "s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne";
 type ReactRef<T extends HTMLElement> = {
@@ -84,10 +84,9 @@ const ResizeHandle = styled.div<{ $axis: string }>`
   ${(props) => (["sw", "nw", "se", "ne"].indexOf(props.$axis) >= 0 ? CornerHandle : "")};
 `;
 
-// Memoize Handle component
-const Handle = memo((axis: ResizeHandleAxis, ref: ReactRef<HTMLDivElement>) => {
-  return <ResizeHandle ref={ref} $axis={axis} className="react-resizable-handle" />;
-});
+const Handle = (resizeHandle: ResizeHandleAxis, ref: RefObject<HTMLDivElement>) => {
+  return <ResizeHandle ref={ref} $axis={resizeHandle} className="react-resizable-handle" />;
+};
 
 Handle.displayName = 'Handle';
 

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/simpleTextComp.tsx

@@ -55,9 +55,10 @@ const SimpleTextEditView = React.memo(({ value, onChange, onChangeEnd }: SimpleT
       variant="borderless"
       onChange={handleChange}
       onBlur={onChangeEnd}
-    onPressEnter={onChangeEnd}
-  />
-)});
+      onPressEnter={onChangeEnd}
+    />
+  );
+});
 
 const SimpleTextPropertyView = React.memo(({ children }: { children: RecordConstructorToComp<typeof childrenMap> }) => {
   return useMemo(() => (

client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx

@@ -434,6 +434,8 @@ export class ColumnComp extends ColumnInitComp {
         )
       )
     );
+    // clear render comp cache when change set is cleared
+    this.children.render.dispatch(RenderComp.clearAction());
   }
 
   dispatchClearInsertSet() {

client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx

@@ -548,7 +548,8 @@ let TableTmpComp = withViewFn(TableImplComp, (comp) => {
 
 const withEditorModeStatus = (Component:any) => (props:any) => {
   const editorModeStatus = useContext(EditorContext).editorModeStatus;
-  return <Component {...props} editorModeStatus={editorModeStatus} />;
+  const {ref, ...otherProps} = props;
+  return <Component {...otherProps} editorModeStatus={editorModeStatus} />;
 };
 
 // Use this HOC when defining TableTmpComp

client/packages/lowcoder/src/comps/hooks/modalComp.tsx

@@ -14,7 +14,7 @@ import { Layers } from "constants/Layers";
 import { HintPlaceHolder, Modal, Section, sectionNames } from "lowcoder-design";
 import { trans } from "i18n";
 import { changeChildAction } from "lowcoder-core";
-import { CSSProperties, useCallback, useMemo, useRef } from "react";
+import { CSSProperties, useCallback, useEffect, useMemo, useRef } from "react";
 import { ResizeHandle } from "react-resizable";
 import styled, { css } from "styled-components";
 import { useUserViewMode } from "util/hooks";
@@ -118,6 +118,12 @@ let TmpModalComp = (function () {
       const appID = useApplicationId();
       const containerRef = useRef<HTMLElement | null>(null);
 
+      useEffect(() => {
+        return () => {
+          containerRef.current = null;
+        };
+      }, []);
+
       // Memoize body style
       const bodyStyle = useMemo<CSSProperties>(() => ({ 
         padding: 0,
@@ -171,11 +177,9 @@ let TmpModalComp = (function () {
 
       // Memoize container getter
       const getContainer = useCallback(() => {
-        if (!containerRef.current) {
-          containerRef.current = document.querySelector(`#${CanvasContainerID}`) || document.body;
-        }
+        containerRef.current = document.querySelector(`#${CanvasContainerID}`) || document.body;
         return containerRef.current;
-      }, []);
+      }, [CanvasContainerID]);
 
       // Memoize event handlers
       const handleCancel = useCallback((e: React.MouseEvent) => {
@@ -228,6 +232,7 @@ let TmpModalComp = (function () {
               mask={props.showMask}
               className={clsx(`app-${appID}`, props.className)}
               data-testid={props.dataTestId as string}
+              destroyOnHidden
             >
               <InnerGrid
                 {...props.container}