From 81295f637aa2542db9ba2aefb3ce34f0d6489d71 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Fri, 18 Nov 2022 11:10:38 +0400
Subject: [PATCH] Avoid children selection of already selected components.
 Closes #4607

---
 src/editor/model/Editor.ts | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/editor/model/Editor.ts b/src/editor/model/Editor.ts
index 9f6251e4a..8437c06f6 100644
--- a/src/editor/model/Editor.ts
+++ b/src/editor/model/Editor.ts
@@ -493,14 +493,25 @@ export default class EditorModel extends Model {
    * @param  {Object} [opts={}] Options, optional
    * @public
    */
-  addSelected(el: any, opts: any = {}) {
+  addSelected(el: Component, opts: any = {}) {
     const model = getModel(el, $);
     const models = isArray(model) ? model : [model];
 
     models.forEach(model => {
-      if (model && !model.get('selectable')) return;
       const { selected } = this;
+      if (
+        !model ||
+        !model.get('selectable') ||
+        // Avoid selecting children of selected components
+        model.parents().some((parent: Component) => selected.hasComponent(parent))
+      ) {
+        return;
+      }
       opts.forceChange && this.removeSelected(model, opts);
+      // Remove from selection, children of the component to select
+      const toDeselect = selected.allComponents().filter(cmp => contains(cmp.parents(), model));
+      toDeselect.forEach(cmp => this.removeSelected(cmp, opts));
+
       selected.addComponent(model, opts);
       model && this.trigger('component:select', model, opts);
     });