fix: cell-focus on click from within shadow DOM (#3714) (#3715)

* fix: cell-focus on click from within shadow DOM

* Apply suggestions from code review

Co-authored-by: Sergey Vinogradov <mr.vursen@gmail.com>

Co-authored-by: Sergey Vinogradov <mr.vursen@gmail.com>

Co-authored-by: Sascha Ißbrücker <sissbruecker@vaadin.com>
Co-authored-by: Sergey Vinogradov <mr.vursen@gmail.com>

packages/grid/src/vaadin-grid.js

@@ -669,7 +669,7 @@ class Grid extends ElementMixin(
           // If focus is on element within the cell content — respect it, do not change
           const contentContainsFocusedElement = cellContent.contains(this.getRootNode().activeElement);
           // Only focus if mouse is released on cell content itself
-          const mouseUpWithinCell = cellContent.contains(event.target);
+          const mouseUpWithinCell = event.composedPath().includes(cellContent);
           if (!contentContainsFocusedElement && mouseUpWithinCell) {
             cell.focus();
           }

packages/grid/test/keyboard-navigation.test.js

@@ -1905,6 +1905,23 @@ describe('keyboard navigation', () => {
         expect(spy.calledOnce).to.be.true;
       });
 
+      it('should dispatch cell-focus on mouse up on cell content when grid is in shadow DOM', () => {
+        const spy = sinon.spy();
+        grid.addEventListener('cell-focus', spy);
+
+        // Move grid into a shadow DOM
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+        container.attachShadow({ mode: 'open' });
+        container.shadowRoot.appendChild(grid);
+
+        // Mouse down and release on cell content element
+        const cell = getRowFirstCell(0);
+        mouseDown(cell._content);
+        mouseUp(cell._content);
+        expect(spy.calledOnce).to.be.true;
+      });
+
       it('should dispatch cell-focus on mouse up within cell content', () => {
         const spy = sinon.spy();
         grid.addEventListener('cell-focus', spy);