Merge pull request #3424 from adumesny/master

* fix #2729 match the cancel selector through shadow DOM

Author: adumesny

doc/CHANGES.md

@@ -149,6 +149,7 @@ Change log
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
 ## 14.0.1 (TBD)
+* fix: [#2729](https://github.com/gridstack/gridstack.js/issues/2729) `cancel` selector now matches elements inside a shadow root
 * fix: [#2728](https://github.com/gridstack/gridstack.js/issues/2728) drag helper drifts off the cursor when the page scrolls under a CSS-transformed containing block
 * fix: [#1959](https://github.com/gridstack/gridstack.js/issues/1959) `update()` refuses a move that would land on a locked item
 * fix: [#2666](https://github.com/gridstack/gridstack.js/issues/2666) iOS auto-scroll uses visualViewport, and un-bind touch handlers

spec/regression-spec.ts

@@ -962,4 +962,50 @@ describe('regression >', () => {
       expect(dd['_cbDrift']).toEqual({dx: 0, dy: 0});
     });
   });
+
+  describe('2729 draggable cancel inside shadow DOM >', () => {
+    let host: HTMLElement;
+    afterEach(() => {
+      delete DDManager.mouseHandled;
+      host?.remove();
+    });
+
+    /** item whose content holds a web component with `.no-drag` inside its shadow root */
+    const build = (cancel: string) => {
+      document.body.insertAdjacentHTML('afterbegin',
+        '<div class="grid-stack-item"><div class="grid-stack-item-content">' +
+        '<div class="wc"></div><span class="plain">plain</span>' +
+        '</div></div>');
+      host = document.querySelector('.grid-stack-item');
+      const wc = host.querySelector('.wc') as HTMLElement;
+      const shadow = wc.attachShadow({mode: 'open'});
+      shadow.innerHTML = '<div class="no-drag">handle off</div><div class="ok">draggable</div>';
+      DDElement.init(host as GridItemHTMLElement).setupDraggable({handle: '.grid-stack-item-content', cancel});
+      return shadow;
+    };
+
+    /** dispatch a real composed mousedown so the browser/jsdom retargets e.target like it would live */
+    const dragStarted = (target: HTMLElement): boolean => {
+      const dd = (host as GridItemHTMLElement).ddElement!.ddDraggable!;
+      target.dispatchEvent(new MouseEvent('mousedown', {button: 0, bubbles: true, composed: true, cancelable: true}));
+      const started = !!dd['mouseDownEvent'];
+      dd['_mouseUp'](new MouseEvent('mouseup'));
+      delete DDManager.mouseHandled;
+      return started;
+    };
+
+    it('honors cancel for an element inside a shadow root', () => {
+      const shadow = build('.no-drag');
+      expect(dragStarted(shadow.querySelector('.ok') as HTMLElement)).toBe(true);
+      // #2729: e.target is retargeted to the <div class="wc"> host out here, and closest()
+      // does not cross the shadow boundary, so this used to start a drag anyway
+      expect(dragStarted(shadow.querySelector('.no-drag') as HTMLElement)).toBe(false);
+    });
+
+    it('still honors cancel in the light DOM', () => {
+      build('.plain');
+      expect(dragStarted(host.querySelector('.plain') as HTMLElement)).toBe(false);
+      expect(dragStarted(host.querySelector('.grid-stack-item-content') as HTMLElement)).toBe(true);
+    });
+  });
 });

src/dd-draggable.ts

@@ -195,6 +195,21 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     if (!wasDisabled) this.enable();
   }
 
+  /** @internal does any element on the event's path match the selector?
+   * Same walk as `e.target.closest(sel)` but through shadow DOM: for a listener outside the shadow
+   * tree the browser retargets `e.target` to the *host*, and `closest()` won't cross the boundary
+   * either, so a `cancel` selector living inside a web component could never match (#2729). */
+  protected _matchInPath(e: Event, selector: string): HTMLElement | undefined {
+    const path = e.composedPath?.() as EventTarget[] | undefined;
+    if (!path?.length) return (e.target as HTMLElement)?.closest(selector) as HTMLElement ?? undefined;
+    for (const t of path) {
+      const el = t as HTMLElement;
+      if (el?.nodeType !== 1) continue; // skip ShadowRoot / document / window
+      if (el.matches?.(selector)) return el;
+    }
+    return undefined;
+  }
+
   /** @internal call when mouse goes down before a dragstart happens */
   protected _mouseDown(e: MouseEvent): boolean {
     // if real browser event (trusted:true vs false for our simulated ones) and prior touch/mouse state didn't clean up, reset it.
@@ -217,7 +232,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     const skipEl = (e.target as HTMLElement).closest(skipMouseDown);
     if (skipEl && !this.dragEls.some(el => el === e.target || el === skipEl)) return true;
     if (this.option.cancel) {
-      if ((e.target as HTMLElement).closest(this.option.cancel)) return true;
+      if (this._matchInPath(e, this.option.cancel)) return true;
     }
 
     this.mouseDownEvent = e;