Avoiding unwanted resize initiation

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>

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}

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 } });
   }