diff --git a/src/canvas/canvas.js b/src/canvas/canvas.js
index 3098ebf..300f071 100644
--- a/src/canvas/canvas.js
+++ b/src/canvas/canvas.js
@@ -253,7 +253,7 @@ class Canvas extends React.Component {
                 console.log("selected widget: ", selectedWidget.getId(), selectedWidget.getElement())
                 // if the widget is selected don't pan, instead move the widget
                 if (!selectedWidget._disableSelection) {
-                    // console.log("selected widget: ", selectedWidget)
+                    console.log("selected widget: ", selectedWidget.getId(), this.state.selectedWidget?.getId())
 
                     if (!this.state.selectedWidget || (selectedWidget.getId() !== this.state.selectedWidget?.getId())) {
                         this.state.selectedWidget?.deSelect() // deselect the previous widget before adding the new one
@@ -261,7 +261,7 @@ class Canvas extends React.Component {
 
                         selectedWidget.setZIndex(1000)
                         selectedWidget.select()
-
+                        console.log("widget selected")
                         this.setState({
                             selectedWidget: selectedWidget,
                             toolbarAttrs: selectedWidget.getToolbarAttrs()
@@ -367,6 +367,12 @@ class Canvas extends React.Component {
         if (this.state.widgetResizing) {
             this.setState({ widgetResizing: "" })
         }
+
+        for (let [key, widget] of Object.entries(this.widgetRefs)){
+            // since the mouseUp event is not triggered inside the widget once its outside, 
+            // we'll need a global mouse up event to re-enable drag
+            widget.current.enableDrag()
+        }
     }
 
     wheelZoom(event) {
@@ -639,7 +645,6 @@ class Canvas extends React.Component {
      */
     handleAddWidgetChild = (parentWidgetId, dragElementID, create = false) => {
 
-        // FIXME: creation of nested child widgets
         // TODO: creation of the child widget if its not created
         // widgets data structure { id, widgetType: widgetComponentType, children: [], parent: "" }
         const parentWidgetObj = this.findWidgetFromListById(parentWidgetId)
diff --git a/src/canvas/widgets/base.js b/src/canvas/widgets/base.js
index c7b752d..544ec22 100644
--- a/src/canvas/widgets/base.js
+++ b/src/canvas/widgets/base.js
@@ -520,6 +520,18 @@ class Widget extends React.Component {
         })
     }
 
+    enableDrag = () => {
+        this.setState({
+            dragEnabled: true
+        })
+    }
+
+    disableDrag = () => {
+        this.setState({
+            dragEnabled: false
+        })
+    }
+
     handleDrop = (event, dragElement) => {
         console.log("dragging event: ", event, dragElement)
 
@@ -606,7 +618,7 @@ class Widget extends React.Component {
             height: `${this.state.size.height}px`,
         }
 
-        // console.log("selected: ", this.state.selected)
+        // console.log("selected: ", this.state.dragEnabled)
         return (
             <WidgetDraggable widgetRef={this.elementRef} 
                                 enableDrag={this.state.dragEnabled}
@@ -636,7 +648,8 @@ class Widget extends React.Component {
                         data-container={this.state.widgetContainer} // indicates how the canvas should handle dragging, one is sidebar other is canvas
                     >
 
-                    <div className="tw-relative tw-w-full tw-h-full tw-top-0 tw-left-0">
+                    <div className="tw-relative tw-w-full tw-h-full tw-top-0 tw-left-0"
+                        >
                         {this.renderContent()}
 
                         {