fix(): Impossible to select object above the Active selection

.codesandbox/templates/vanilla/src/index.ts

@@ -1,6 +1,6 @@
 import * as fabric from 'fabric';
 import './styles.css';
-import { testCase } from './testcases/clipPathSelection';
+import { testCase } from './testcases/selections';
 
 const el = document.getElementById('canvas');
 const canvas = (window.canvas = new fabric.Canvas(el, {

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- fix(): Impossible to select object above the Active selection [#10483](https://github.com/fabricjs/fabric.js/pull/10483)
 - ci(): fix Coverage is not being reported anymore [#10617](https://github.com/fabricjs/fabric.js/pull/10617)
 - refactor(tests): move free draw rendering tests from qunit to playwright [#10616](https://github.com/fabricjs/fabric.js/pull/10616)
 - refactor(tests): move resize filter test cases from qunit to playwright [#10615](https://github.com/fabricjs/fabric.js/pull/10615)

src/canvas/SelectableCanvas.spec.ts

@@ -319,7 +319,7 @@ describe('Selectable Canvas', () => {
       });
       const groupB = new Group([object], {
         id: 'b',
-        interactive: true,
+        interactive: false,
         subTargetCheck: true,
       });
       const groupC = new Group([groupB], {

src/canvas/SelectableCanvas.ts

@@ -720,17 +720,28 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
 
     this.targets = [];
 
+    // a lot of special cases for when the object is already active
     if (activeObject && aObjects.length >= 1) {
+      // it there is an active object and we click its corner
       if (activeObject.findControl(pointer, isTouchEvent(e))) {
-        // if we hit the corner of the active object, let's return that.
+        // let's keep the target on the corner.
+        // This is a common sense thing that works for everyone
         return activeObject;
-      } else if (
+      }
+      // We need to look for this in many cases, doesn't make sense to skip it.
+      const globalTarget = this.searchPossibleTargets(this._objects, pointer);
+      if (
+        // otherwise if is an active selection
         aObjects.length > 1 &&
         // check pointer is over active selection and possibly perform `subTargetCheck`
-        this.searchPossibleTargets([activeObject], pointer)
+        activeObject === this._searchPossibleTargets([activeObject], pointer)
       ) {
-        // active selection does not select sub targets like normal groups
-        return activeObject;
+        if (globalTarget && globalTarget.group === activeObject) {
+          // active selection does not select sub targets like normal groups
+          return activeObject;
+        } else {
+          return globalTarget ?? activeObject;
+        }
       } else if (
         activeObject === this.searchPossibleTargets([activeObject], pointer)
       ) {
@@ -740,7 +751,7 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
         } else {
           const subTargets = this.targets;
           this.targets = [];
-          const target = this.searchPossibleTargets(this._objects, pointer);
+          const target = globalTarget;
           if (
             e[this.altSelectionKey as ModifierKey] &&
             target &&
@@ -755,7 +766,6 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
         }
       }
     }
-
     return this.searchPossibleTargets(this._objects, pointer);
   }
 
@@ -833,7 +843,7 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
   }
 
   /**
-   * Internal Function used to search inside objects an object that contains pointer in bounding box or that contains pointerOnCanvas when painted
+   * Internal Function used to search inside objects an object that contains pointer in bounding box
    * @param {Array} [objects] objects array to look into
    * @param {Object} [pointer] x,y object of point coordinates we want to check.
    * @return {FabricObject} **top most object from given `objects`** that contains pointer
@@ -855,6 +865,8 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
             target._objects as FabricObject[],
             pointer,
           );
+          // being recursive this targets is filled up in reverse.
+          // target[0] is the last found target deep in the stack
           subTarget && this.targets.push(subTarget);
         }
         return target;
@@ -863,7 +875,7 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
   }
 
   /**
-   * Function used to search inside objects an object that contains pointer in bounding box or that contains pointerOnCanvas when painted
+   * Function used to search inside objects an object that could be selected
    * @see {@link _searchPossibleTargets}
    * @param {FabricObject[]} [objects] objects array to look into
    * @param {Point} [pointer] coordinates from viewport to check.