From 5c495e98aedd7b0622f233821421a6764608a267 Mon Sep 17 00:00:00 2001
From: Haijian Wang <30408303+haijian-vaadin@users.noreply.github.com>
Date: Thu, 4 Feb 2021 10:54:53 +0200
Subject: [PATCH] fix: scroll to top on click event (#547)

---
 src/triggers/click.js         |  4 ++++
 test/triggers/click.spec.html | 36 +++++++++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+)

diff --git a/src/triggers/click.js b/src/triggers/click.js
index 0e306993..d42c88f4 100644
--- a/src/triggers/click.js
+++ b/src/triggers/click.js
@@ -89,6 +89,10 @@ function vaadinRouterGlobalClickHandler(event) {
   const {pathname, search, hash} = anchor;
   if (fireRouterEvent('go', {pathname, search, hash})) {
     event.preventDefault();
+    // for a click event, the scroll is reset to the top position.
+    if (event && event.type === 'click') {
+      window.scrollTo(0, 0);
+    }
   }
 }
 
diff --git a/test/triggers/click.spec.html b/test/triggers/click.spec.html
index e1af106d..09efa3c7 100644
--- a/test/triggers/click.spec.html
+++ b/test/triggers/click.spec.html
@@ -285,6 +285,42 @@
             expect(clicks[0]).to.have.property('defaultPrevented', true);
           });
 
+          it('should scroll to top on click event', () => {
+            const div = document.createElement('div');
+            div.setAttribute('style', 'width:2000px; height:2000px;');
+            document.body.append(div);
+
+            window.scrollTo(10, 10);
+            expect(window.scrollX).to.within(9, 11);
+            expect(window.scrollY).to.within(9, 11);
+
+            emulateClick(document.getElementById('in-app'));
+
+            expect(window.scrollX).to.within(0, 1);
+            expect(window.scrollY).to.within(0, 1);
+            document.body.removeChild(div);
+          });
+
+          it('should not scroll to top on unhandled click event', () => {
+            preventNavigationDefault = false;
+
+            const div = document.createElement('div');
+            div.setAttribute('style', 'width:2000px; height:2000px;');
+            document.body.append(div);
+
+            window.scrollTo(10, 10);
+            expect(window.scrollX).to.within(9, 11);
+            expect(window.scrollY).to.within(9, 11);
+
+            emulateClick(document.getElementById('in-app'));
+
+            expect(window.scrollX).to.within(9, 11);
+            expect(window.scrollY).to.within(9, 11);
+            document.body.removeChild(div);
+
+            preventNavigationDefault = true;
+          });
+
           describe('irrelevant `click` events', () => {
             function expectClickIgnored() {
               expect(navigateEvents).to.have.lengthOf(0);