From 4b3f0ed65dd16e0e85c5dc4429b07e23ef9fabd1 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Fri, 21 Mar 2025 00:25:06 +0530
Subject: [PATCH] Fix hidden component not being draggable if visibility
 changed using CSA

---
 frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx     | 5 ++++-
 frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx  | 1 +
 frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx | 6 +++---
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
index bbc10562a7..93144b500a 100644
--- a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
@@ -66,6 +66,7 @@ export default function Grid({ gridWidth, currentLayout }) {
   const newDragParentId = useRef(null);
   const [isGroupDragging, setIsGroupDragging] = useState(false);
   const checkIfAnyWidgetVisibilityChanged = useStore((state) => state.checkIfAnyWidgetVisibilityChanged(), shallow);
+  const getExposedValueOfComponent = useStore((state) => state.getExposedValueOfComponent, shallow);
 
   useEffect(() => {
     const selectedSet = new Set(selectedComponents);
@@ -329,6 +330,8 @@ export default function Grid({ gridWidth, currentLayout }) {
 
   const isComponentVisible = (id) => {
     const component = getResolvedComponent(id);
+    const componentExposedVisibility = getExposedValueOfComponent(id)?.isVisible;
+    if (componentExposedVisibility === false) return false;
     let visibility;
     if (isArray(component)) {
       visibility = component?.[0]?.properties?.visibility ?? component?.[0]?.styles?.visibility ?? null;
@@ -630,13 +633,13 @@ export default function Grid({ gridWidth, currentLayout }) {
             // When clicked on widget boundary/resizer, select the component
             setSelectedComponents([e.target.id]);
           }
-          showGridLines();
           if (!isComponentVisible(e.target.id)) {
             return false;
           }
           handleActivateNonDraggingComponents();
           useGridStore.getState().actions.setResizingComponentId(e.target.id);
           e.setMin([gridWidth, GRID_HEIGHT]);
+          showGridLines();
         }}
         onResizeEnd={(e) => {
           try {
diff --git a/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx b/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx
index b26586dc08..ad866e0b77 100644
--- a/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx
@@ -7,6 +7,7 @@ import { renderTooltip } from '@/_helpers/appUtils';
 import { useTranslation } from 'react-i18next';
 import ErrorBoundary from '@/_ui/ErrorBoundary';
 import { BOX_PADDING } from './appCanvasConstants';
+
 const shouldAddBoxShadowAndVisibility = [
   'Table',
   'TextInput',
diff --git a/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx b/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx
index 3fe5bd9806..5f6fc748ad 100644
--- a/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx
@@ -62,9 +62,9 @@ const WidgetWrapper = memo(
       <>
         <div
           className={cx(`moveable-box ele-${id}`, {
-            [`target widget-target target1  moveable-box widget-${id}`]: !readOnly && visibility !== false,
-            [`widget-${id} nested-target`]: id !== 'canvas' && !readOnly && visibility !== false,
-            'position-absolute': readOnly || visibility === false,
+            [`target widget-target target1  moveable-box widget-${id}`]: !readOnly,
+            [`widget-${id} nested-target`]: id !== 'canvas' && !readOnly,
+            'position-absolute': readOnly,
             'active-target': isWidgetActive,
             'opacity-0': isDragging || isResizing,
           })}