diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js
index 183cd8156..99d4598ef 100644
--- a/src/commands/view/SelectComponent.js
+++ b/src/commands/view/SelectComponent.js
@@ -100,7 +100,21 @@ module.exports = {
       this.onFrameScroll(e);
       this.updateAttached();
     }
+    var model = $(trg).data('model');
+    if (typeof model != 'undefined') {
 
+      if (!model.get("selectable")) {
+        var comp = model && model.parent();
+
+        // recurse through the parent() chain until a selectable parent is found
+        while (comp && !comp.get("selectable")) {
+          comp = comp.parent();
+        }
+        trg = comp.view.el;
+      }
+
+    }
+    
     var pos = this.getElementPos(trg);
     this.updateBadge(trg, pos);
     this.updateHighlighter(trg, pos);
@@ -186,7 +200,22 @@ module.exports = {
   onClick(e) {
     e.stopPropagation();
     const model = $(e.target).data('model');
-    model && this.editor.select(model);
+     if (typeof model != 'undefined') {
+      if (model.get("selectable")) {
+
+        model && this.editor.select(model);
+
+      } else {
+        var comp = model && model.parent();
+
+        // recurse through the parent() chain until a selectable parent is found
+        while (comp && !comp.get("selectable")) {
+          comp = comp.parent();
+        }
+
+        comp && editor.select(comp);
+      }
+    }
   },
 
   /**