MDL-70033 core: Update tree.js event handlers to replace stopPropagation

Also added support to allow links to override action keys (enter/space)

Co-authored-by: Andrew Nicols <[email protected]>

lib/amd/src/tree.js

@@ -351,7 +351,6 @@ define(['jquery'], function($) {
      * @method handleKeyDown
      * @param {Object} item is the jquery id of the parent item of the group.
      * @param {Event} e The event.
-     * @return {Boolean}
      */
      // This function should be simplified. In the meantime..
      // eslint-disable-next-line complexity
@@ -360,7 +359,7 @@ define(['jquery'], function($) {
 
         if ((e.altKey || e.ctrlKey || e.metaKey) || (e.shiftKey && e.keyCode != this.keys.tab)) {
             // Do nothing.
-            return true;
+            return;
         }
 
         switch (e.keyCode) {
@@ -368,21 +367,24 @@ define(['jquery'], function($) {
                 // Jump to first item in tree.
                 this.getVisibleItems().first().focus();
 
-                e.stopPropagation();
-                return false;
+                e.preventDefault();
+                return;
             }
             case this.keys.end: {
                 // Jump to last visible item.
                 this.getVisibleItems().last().focus();
 
-                e.stopPropagation();
-                return false;
+                e.preventDefault();
+                return;
             }
             case this.keys.enter: {
                 var links = item.children('a').length ? item.children('a') : item.children().not(SELECTORS.GROUP).find('a');
                 if (links.length) {
-                    // See if we have a callback.
-                    if (typeof this.enterCallback === 'function') {
+                    if (links.first().data('overrides-tree-activation-key-handler')) {
+                        // If the link overrides handling of activation keys, let it do so.
+                        links.first().triggerHandler(e);
+                    } else if (typeof this.enterCallback === 'function') {
+                        // Use callback if there is one.
                         this.enterCallback(item);
                     } else {
                         window.location.href = links.first().attr('href');
@@ -391,16 +393,22 @@ define(['jquery'], function($) {
                     this.toggleGroup(item, true);
                 }
 
-                e.stopPropagation();
-                return false;
+                e.preventDefault();
+                return;
             }
             case this.keys.space: {
                 if (this.isGroupItem(item)) {
                     this.toggleGroup(item, true);
+                } else if (item.children('a').length) {
+                    var firstLink = item.children('a').first();
+
+                    if (firstLink.data('overrides-tree-activation-key-handler')) {
+                        firstLink.triggerHandler(e);
+                    }
                 }
 
-                e.stopPropagation();
-                return false;
+                e.preventDefault();
+                return;
             }
             case this.keys.left: {
                 var focusParent = function(tree) {
@@ -422,8 +430,8 @@ define(['jquery'], function($) {
                     focusParent(this);
                 }
 
-                e.stopPropagation();
-                return false;
+                e.preventDefault();
+                return;
             }
             case this.keys.right: {
                 // If this is a group item then expand it and focus the first child item
@@ -437,8 +445,8 @@ define(['jquery'], function($) {
                     }
                 }
 
-                e.stopPropagation();
-                return false;
+                e.preventDefault();
+                return;
             }
             case this.keys.up: {
 
@@ -448,8 +456,8 @@ define(['jquery'], function($) {
                     prev.focus();
                 }
 
-                e.stopPropagation();
-                return false;
+                e.preventDefault();
+                return;
             }
             case this.keys.down: {
 
@@ -459,17 +467,16 @@ define(['jquery'], function($) {
                     next.focus();
                 }
 
-                e.stopPropagation();
-                return false;
+                e.preventDefault();
+                return;
             }
             case this.keys.asterisk: {
                 // Expand all groups.
                 this.expandAllGroups();
-                e.stopPropagation();
-                return false;
+                e.preventDefault();
+                return;
             }
         }
-        return true;
     };
 
     /**
@@ -478,7 +485,6 @@ define(['jquery'], function($) {
      * @method handleClick
      * @param {Object} item The jquery id of the parent item of the group.
      * @param {Event} e The event.
-     * @return {Boolean}
      */
     Tree.prototype.handleClick = function(item, e) {
 
@@ -502,14 +508,10 @@ define(['jquery'], function($) {
      * @method handleFocus
      * @param {Object} item The jquery id of the parent item of the group.
      * @param {Event} e The event.
-     * @return {Boolean}
      */
-    Tree.prototype.handleFocus = function(item, e) {
+    Tree.prototype.handleFocus = function(item) {
 
         this.setActiveItem(item);
-
-        e.stopPropagation();
-        return true;
     };
 
     /**
@@ -529,8 +531,8 @@ define(['jquery'], function($) {
             keydown: function(e) {
               return thisObj.handleKeyDown($(this), e);
             },
-            focus: function(e) {
-              return thisObj.handleFocus($(this), e);
+            focus: function() {
+              return thisObj.handleFocus($(this));
             },
         }, SELECTORS.ITEM);
     };