fix: added checkInput attribute to drag container to indentify editable elements in container

frontend/src/Editor/Components/Container.jsx

@@ -2,6 +2,7 @@ import React, { useRef } from 'react';
 import { SubCustomDragLayer } from '../SubCustomDragLayer';
 import { SubContainer } from '../SubContainer';
 import Spinner from '@/_ui/Spinner';
+import { useDraggedSubContainer } from '@/_stores/gridStore';
 
 export const Container = function Container({
   id,
@@ -16,6 +17,7 @@ export const Container = function Container({
   properties,
 }) {
   const { visibility, disabledState, borderRadius, borderColor, boxShadow } = styles;
+  const [draggedSubContainer] = useDraggedSubContainer();
   const backgroundColor =
     ['#fff', '#ffffffff'].includes(styles.backgroundColor) && darkMode ? '#232E3C' : styles.backgroundColor;
   const computedStyles = {
@@ -24,7 +26,8 @@ export const Container = function Container({
     border: `1px solid ${borderColor}`,
     height,
     display: visibility ? 'flex' : 'none',
-    overflow: 'hidden auto',
+    overflow: draggedSubContainer ? 'unset' : 'hidden auto',
+    // overflow: 'hidden auto',
     position: 'relative',
     boxShadow,
   };

frontend/src/Editor/Container.jsx

@@ -24,7 +24,7 @@ import _, { cloneDeep } from 'lodash';
 import { diff } from 'deep-object-diff';
 import DragContainer from './DragContainer';
 import { compact, correctBounds } from './gridUtils';
-import { useNoOfGrid } from '@/_stores/gridStore';
+import { useDraggedSubContainer, useNoOfGrid } from '@/_stores/gridStore';
 import useConfirm from '@/Editor/QueryManager/QueryEditors/TooljetDatabase/Confirm';
 // eslint-disable-next-line import/no-unresolved
 
@@ -60,7 +60,7 @@ export const Container = ({
   const { confirm, ConfirmDialog } = useConfirm();
   // import { useActiveGrid } from '@/_stores/gridStore';
   const [subContainerWidths, setSubContainerWidths] = useState({});
-  const [draggedSubContainer, setDraggedSubContainer] = useState(false);
+  const [draggedSubContainer, setDraggedSubContainer] = useDraggedSubContainer(false);
 
   const { showComments, currentLayout, selectedComponents } = useEditorStore(
     (state) => ({

frontend/src/Editor/DragContainer.css

@@ -11,7 +11,7 @@
 	/* font-weight: bold; */
 	box-sizing: border-box;
 	/* transition: transform 0.1s; */
-    z-index: 3001;
+    /* z-index: 3001; */
 }
 
 .moveable-control-box>.moveable-control-box:not(.moveable-control-box-d-block, .moveable-dragging){

frontend/src/Editor/DragContainer.jsx

@@ -388,11 +388,8 @@ export default function DragContainer({
               }}
               // linePadding={10}
               onDragEnd={(e) => {
-                console.log('onDragEnd', e);
                 try {
-                  console.log('On-drag end => ');
                   setIsDragging(false);
-                  console.log('onDragEnd', e);
                   setDraggedTarget();
                   if (draggedSubContainer) {
                     return;
@@ -513,16 +510,21 @@ export default function DragContainer({
               .map((i) => {
                 let groupedTargets1 = [
                   ...selectedComponents
-                    .filter((component) => component?.component?.parent === i.parent)
+                    .filter((component) => {
+                      const comp = list.find((l) => l.id === component.id);
+                      comp?.component?.parent === i.parent;
+                    })
                     .map((component) => '.ele-' + component.id),
                 ];
                 groupedTargets1 = [...new Set(groupedTargets1)];
                 console.log(
                   'groupedTargets-->target ' + i.parent,
+                  selectedComponents,
                   groupedTargets1.length ? groupedTargets1 : `.target-${i.parent}`
                 );
                 return (
                   <Moveable
+                    flushSync={flushSync}
                     key={i.parent}
                     ref={(el) => (childMoveableRefs.current[i.id] = el)}
                     ables={[MouseCustomAble]}
@@ -544,9 +546,10 @@ export default function DragContainer({
                         turnOffAutoLayout();
                         return false;
                       }
-                      setDraggedSubContainer((dragged) => (dragged ? dragged : i.parent));
+                      setDraggedSubContainer(draggedSubContainer ? draggedSubContainer : i.parent);
                     }}
                     onDrag={(e) => {
+                      console.log('Ondrag subcontainer', draggedSubContainer);
                       if (draggedSubContainer === i.parent) {
                         e.target.style.transform = e.transform;
                       }
@@ -558,6 +561,9 @@ export default function DragContainer({
                       }
                       setDraggedSubContainer(false);
                       const { lastEvent, clientX, clientY } = e;
+                      if (!lastEvent) {
+                        return;
+                      }
                       let {
                         translate: [left, top],
                       } = lastEvent;
@@ -709,6 +715,9 @@ export default function DragContainer({
                       middle: true,
                     }}
                     snapThreshold={5}
+                    // passing checkInput param breaks
+                    {...(draggedSubContainer === i.parent ? {} : { checkInput: true })}
+                    // dragArea={false}
                     elementGuidelines={list
                       .filter((l) => l.parent === i.parent)
                       .map((l) => ({ element: `.ele-${l.id}`, className: 'grid-guide-lines' }))}

frontend/src/Editor/DraggableBox.jsx

@@ -227,14 +227,12 @@ export const DraggableBox = React.memo(
               'draggable-box-in-editor': mode === 'edit',
             })}
             onMouseEnter={(e) => {
-              console.log('TEST====>');
               if (e.currentTarget.className.includes(`widget-${id}`)) {
                 onComponentHover?.(id);
                 e.stopPropagation();
               }
             }}
             onMouseLeave={() => {
-              console.log('TEST====> mouseleace');
               setHoveredComponent('');
             }}
             style={getStyles(isDragging, isSelectedComponent)}

frontend/src/Editor/SubContainer.jsx

@@ -522,7 +522,6 @@ export const SubContainer = ({
   }
 
   const renderWidget = (key, height) => {
-    console.log('childeWidget', key, height);
     if (!childWidgets[key]) {
       return;
     }

frontend/src/_stores/gridStore.js

@@ -4,6 +4,7 @@ const initialState = {
   draggedElement: null,
   activeGrid: null,
   noOfGrid: 43,
+  draggedSubContainer: false,
 };
 
 export const useGridStore = create(
@@ -13,6 +14,7 @@ export const useGridStore = create(
       actions: {
         setActiveGrid: (gridId) => set({ activeGrid: gridId }),
         setNoOfGrid: (noOfGrid) => set({ noOfGrid }),
+        setDraggedSubContainer: (draggedSubContainer) => set({ draggedSubContainer }),
       },
     }),
     { name: 'Grid Store' }
@@ -21,3 +23,5 @@ export const useGridStore = create(
 
 export const useActiveGrid = () => useGridStore((state) => [state.activeGrid, state.actions.setActiveGrid]);
 export const useNoOfGrid = () => useGridStore((state) => [state.noOfGrid, state.actions.setNoOfGrid]);
+export const useDraggedSubContainer = () =>
+  useGridStore((state) => [state.draggedSubContainer, state.actions.setDraggedSubContainer]);