diff --git a/packages/grid/src/vaadin-grid-sorter.js b/packages/grid/src/vaadin-grid-sorter.js
index 89dd77ba9eb..66c932d2782 100644
--- a/packages/grid/src/vaadin-grid-sorter.js
+++ b/packages/grid/src/vaadin-grid-sorter.js
@@ -212,6 +212,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 df342766e85..c648d9bde58 100644
--- a/packages/grid/test/sorting.test.js
+++ b/packages/grid/test/sorting.test.js
@@ -9,7 +9,7 @@ import { buildDataSet, flushGrid, getBodyCellContent, getHeaderCellContent, getR
 
 describe('sorting', () => {
   describe('sorter', () => {
-    let sorter, button, orderIndicator;
+    let sorter, title, button, orderIndicator;
 
     beforeEach(() => {
       sorter = fixtureSync(`
@@ -18,6 +18,7 @@ describe('sorting', () => {
         </vaadin-grid-sorter>
       `);
       button = sorter.querySelector('button');
+      title = sorter.querySelector('.title');
       orderIndicator = sorter.shadowRoot.querySelector('[part="order"]');
     });
 
@@ -40,6 +41,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);