From 5d5f1871c4b604b95c2cd15870e2a185daf54336 Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Wed, 30 Nov 2022 12:24:02 +0200
Subject: [PATCH] fix: ignore sorter click if event is canceled

---
 packages/grid/src/vaadin-grid-sorter.js | 5 +++++
 packages/grid/test/sorting.test.js      | 9 ++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/grid/src/vaadin-grid-sorter.js b/packages/grid/src/vaadin-grid-sorter.js
index 3df0493ce6c..b6e53c0d7a6 100644
--- a/packages/grid/src/vaadin-grid-sorter.js
+++ b/packages/grid/src/vaadin-grid-sorter.js
@@ -224,6 +224,11 @@ class GridSorter extends ThemableMixin(DirMixin(PolymerElement)) {
 
   /** @private */
   _onClick(e) {
+    if (e.defaultPrevented) {
+      // Something else has already handled the click event, do nothing.
+      return;
+    }
+
     const activeElement = this.getRootNode().activeElement;
     if (this !== activeElement && this.contains(activeElement)) {
       // Some focusable content inside the sorter was clicked, do nothing.
diff --git a/packages/grid/test/sorting.test.js b/packages/grid/test/sorting.test.js
index 5cc47c68d20..177f50cabf9 100644
--- a/packages/grid/test/sorting.test.js
+++ b/packages/grid/test/sorting.test.js
@@ -16,7 +16,7 @@ import {
 
 describe('sorting', () => {
   describe('sorter', () => {
-    let sorter, button, orderIndicator;
+    let sorter, title, button, orderIndicator;
 
     beforeEach(() => {
       sorter = fixtureSync(`
@@ -25,6 +25,7 @@ describe('sorting', () => {
         </vaadin-grid-sorter>
       `);
       button = sorter.querySelector('button');
+      title = sorter.querySelector('.title');
       orderIndicator = sorter.shadowRoot.querySelector('[part="order"]');
     });
 
@@ -47,6 +48,12 @@ describe('sorting', () => {
       expect(sorter.direction).to.equal(null);
     });
 
+    it('should not toggle if click event is already consumed', () => {
+      title.addEventListener('click', (e) => e.preventDefault());
+      click(title);
+      expect(sorter.direction).to.equal(null);
+    });
+
     it('should fire a sorter-changed event', () => {
       const spy = sinon.spy();
       sorter.addEventListener('sorter-changed', spy);