Navigation menubar: Fix scroll-to-top problem for issue 1307 (pull #1308

) Issue #1307 reported 2 problems with the navigation menubar example. This commit resolves the scroll to top issue by preventing menuitem anchor elements from jumping to href="#" (i.e. top of page in Chrome) if they have a menu/submenu. Co-authored-by: Matt King <[email protected]>
w3c · Feb 5, 2020 · 4667318 · 4667318
1 parent 44b1942
commit 4667318
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/examples/menubar/menubar-1/js/MenubarItemLinks.js b/examples/menubar/menubar-1/js/MenubarItemLinks.js
@@ -33,6 +33,7 @@ MenubarItem.prototype.init = function () {
   this.domNode.tabIndex = -1;
 
   this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
+  this.domNode.addEventListener('click', this.handleClick.bind(this));
   this.domNode.addEventListener('focus', this.handleFocus.bind(this));
   this.domNode.addEventListener('blur', this.handleBlur.bind(this));
   this.domNode.addEventListener('mouseover', this.handleMouseover.bind(this));
@@ -122,6 +123,14 @@ MenubarItem.prototype.handleKeydown = function (event) {
   }
 };
 
+MenubarItem.prototype.handleClick = function (event) {
+  if (this.popupMenu) {
+    // for menuitem with menu, prevent default anchor behavior on click
+    // (which jumps to top of page for href="#" in some browsers)
+    event.preventDefault();
+  }
+};
+
 MenubarItem.prototype.setExpanded = function (value) {
   if (value) {
     this.domNode.setAttribute('aria-expanded', 'true');

diff --git a/examples/menubar/menubar-1/js/PopupMenuItemLinks.js b/examples/menubar/menubar-1/js/PopupMenuItemLinks.js
@@ -173,6 +173,11 @@ MenuItem.prototype.setExpanded = function (value) {
 MenuItem.prototype.handleClick = function (event) {
   this.menu.setFocusToController();
   this.menu.close(true);
+  if (this.popupMenu) {
+    // for menuitem with menu, prevent default anchor behavior on click
+    // (which jumps to top of page for href="#" in some browsers)
+    event.preventDefault();
+  }
 };
 
 MenuItem.prototype.handleFocus = function (event) {