Skip to content

Commit

Permalink
fix: cell-focus on click from within shadow DOM (#3714) (#3715)
Browse files Browse the repository at this point in the history
* 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>
  • Loading branch information
3 people committed Apr 21, 2022
1 parent 838d100 commit f9c59e3
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 1 deletion.
2 changes: 1 addition & 1 deletion packages/grid/src/vaadin-grid.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
Expand Down
17 changes: 17 additions & 0 deletions packages/grid/test/keyboard-navigation.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down

0 comments on commit f9c59e3

Please sign in to comment.