fix: scroll to top on click event (#547)

vaadin · Feb 12, 2021 · 5c495e9 · 5c495e9
1 parent 17b2e3f
commit 5c495e9
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 0 deletions.
diff --git 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
@@ -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);