From 89f452387606dc2e1242acb1bf20b7493925e1e3 Mon Sep 17 00:00:00 2001
From: navaneeth <navaneethpk@outlook.com>
Date: Mon, 17 May 2021 09:42:52 +0530
Subject: [PATCH] Avoiding unwanted resize initiation

---
 frontend/src/Editor/ConfigHandle.jsx |  7 ++++---
 frontend/src/Editor/DraggableBox.jsx | 18 ++++++++++--------
 frontend/src/Editor/Editor.jsx       |  1 +
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/frontend/src/Editor/ConfigHandle.jsx b/frontend/src/Editor/ConfigHandle.jsx
index 49b037d99f..0a80a827f1 100644
--- a/frontend/src/Editor/ConfigHandle.jsx
+++ b/frontend/src/Editor/ConfigHandle.jsx
@@ -3,12 +3,13 @@ import React from 'react';
 export const ConfigHandle = function ConfigHandle({
     id,
     component,
-    configHandleClicked
+    configHandleClicked,
+    dragRef
 }) {
 
-    return <div className="config-handle">
+    return <div className="config-handle" ref={dragRef}>
          <span onClick={(e) => { e.preventDefault(); configHandleClicked(id, component) }} className="badge badge bg-azure-lt" role="button">
-            <img src="https://www.svgrepo.com/show/83981/menu.svg" width="8" height="8" style={{marginRight: '5px'}} />
+            <img src="https://www.svgrepo.com/show/83981/menu.svg" width="8" height="8" style={{marginRight: '5px'}}/>
             {component.name}
          </span>
     </div>
diff --git a/frontend/src/Editor/DraggableBox.jsx b/frontend/src/Editor/DraggableBox.jsx
index e74b2bcb6e..1fa82a7d0c 100644
--- a/frontend/src/Editor/DraggableBox.jsx
+++ b/frontend/src/Editor/DraggableBox.jsx
@@ -115,13 +115,7 @@ export const DraggableBox = function DraggableBox({
     <div>
       {inCanvas ? (
         <div style={getStyles(left, top, isDragging, component)} className="draggable-box">
-          {mode === 'edit' && 
-            <ConfigHandle 
-              id={id} 
-              component={component}
-              configHandleClicked={(id, component) => configHandleClicked(id, component)}
-            /> 
-          }
+          
           <Resizable
             style={{ ...style }}
             defaultSize={{}}
@@ -134,7 +128,15 @@ export const DraggableBox = function DraggableBox({
               onResizeStop(id, width, height, e, direction, ref, d);
             }}
           >
-            <div {...refProps} role="DraggableBox" style={isResizing ? { opacity: 0.5 } : { opacity: 1 }}>
+            <div ref={preview} role="DraggableBox" style={isResizing ? { opacity: 0.5 } : { opacity: 1 }}>
+            {mode === 'edit' && 
+            <ConfigHandle 
+              id={id} 
+              dragRef={refProps.ref}
+              component={component}
+              configHandleClicked={(id, component) => configHandleClicked(id, component)}
+            /> 
+          }
               <Box
                 component={component}
                 id={id}
diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx
index 631a1fd1a0..adf64e9087 100644
--- a/frontend/src/Editor/Editor.jsx
+++ b/frontend/src/Editor/Editor.jsx
@@ -326,6 +326,7 @@ class Editor extends React.Component {
   };
 
   configHandleClicked = (id, component) => {
+    this.switchSidebarTab(1);
     this.setState({ selectedComponent: { id, component } });
   }