diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js
index 4a9c09a21..0ba1fe489 100644
--- a/src/commands/view/SelectComponent.js
+++ b/src/commands/view/SelectComponent.js
@@ -219,8 +219,8 @@ module.exports = {
   select(model, event = {}) {
     if (!model) return;
     const ctrlKey = event.ctrlKey || event.metaKey;
+    const shiftKey = event.shiftKey;
     const { editor } = this;
-    console.log('shiftKey', event.shiftKey, 'ctrlKey', ctrlKey);
 
     if (ctrlKey) {
       editor.selectToggle(model);
diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js
index 57dd87e9a..5d5056f86 100644
--- a/src/editor/model/Editor.js
+++ b/src/editor/model/Editor.js
@@ -1,4 +1,5 @@
-import { isUndefined, isElement, defaults } from 'underscore';
+import { isUndefined, defaults } from 'underscore';
+import { getModel } from 'utils/mixins';
 
 const deps = [
   require('utils'),
@@ -238,10 +239,11 @@ module.exports = Backbone.Model.extend({
    * @private
    */
   setSelected(el, opts = {}) {
-    let model = el;
-    isElement(el) && (model = $(el).data('model'));
+    const model = getModel(el, $);
     if (model && !model.get('selectable')) return;
     opts.forceChange && this.set('selectedComponent', '');
+    const selected = this.get('selected');
+    selected.remove(selected.models);
     this.set('selectedComponent', model, opts);
   },
 
@@ -252,8 +254,7 @@ module.exports = Backbone.Model.extend({
    * @private
    */
   addSelected(el, opts = {}) {
-    let model = el;
-    isElement(el) && (model = $(el).data('model'));
+    const model = getModel(el, $);
     if (model && !model.get('selectable')) return;
     this.get('selected').push(model, opts);
   },
@@ -265,9 +266,7 @@ module.exports = Backbone.Model.extend({
    * @private
    */
   removeSelected(el, opts = {}) {
-    let model = el;
-    isElement(el) && (model = $(el).data('model'));
-    this.get('selected').remove(model, opts);
+    this.get('selected').remove(getModel(el, $), opts);
   },
 
   /**
@@ -277,8 +276,7 @@ module.exports = Backbone.Model.extend({
    * @private
    */
   toggleSelected(el, opts = {}) {
-    let model = el;
-    isElement(el) && (model = $(el).data('model'));
+    const model = getModel(el, $);
     if (this.get('selected').contains(model)) {
       this.removeSelected(model, opts);
     } else {
@@ -293,8 +291,7 @@ module.exports = Backbone.Model.extend({
    * @private
    */
   setHovered(el, opts = {}) {
-    let model = el;
-    isElement(el) && (model = $(el).data('model'));
+    const model = getModel(el, $);
     if (model && !model.get('hoverable')) return;
     opts.forceChange && this.set('componentHovered', '');
     this.set('componentHovered', model, opts);
diff --git a/src/utils/mixins.js b/src/utils/mixins.js
index de94e8634..a9489b042 100644
--- a/src/utils/mixins.js
+++ b/src/utils/mixins.js
@@ -110,12 +110,24 @@ const getElement = el => {
   }
 };
 
+/**
+ * Ensure to fetch the model from the input argument
+ * @param  {HTMLElement|Component} el Component or HTML element
+ * @return {Component}
+ */
+const getModel = (el, $) => {
+  let model = el;
+  isElement(el) && (model = $(el).data('model'));
+  return model;
+};
+
 export {
   on,
   off,
   hasDnd,
   upFirst,
   matches,
+  getModel,
   camelCase,
   getElement,
   shallowDiff,