fix(utils): extractElementByName() and findFocusTarget() logic improved

findFocusTarget() scans deep and properly uses `$eval()` on possible focus expression.
extractElementByName() includes optional argument to scan deep in all child nodes.
added unit tests

Fixes #4532. Fixes #4497.

src/components/sidenav/sidenav.js

@@ -155,7 +155,7 @@ function SidenavFocusDirective() {
  * By default, upon opening it will slide out on top of the main content area.
  *
  * For keyboard and screen reader accessibility, focus is sent to the sidenav wrapper by default.
- * It can be overridden with the `md-sidenav-focus` directive on the child element you want focused.
+ * It can be overridden with the `md-autofocus` directive on the child element you want focused.
  *
  * @usage
  * <hljs lang="html">
@@ -178,7 +178,7 @@ function SidenavFocusDirective() {
  * <md-input-container>
  * <label for="testInput">Test input</label>
  * <input id="testInput" type="text"
- * ng-model="data" md-sidenav-focus>
+ * ng-model="data" md-autofocus>
  * </md-input-container>
  * </form>
  * </md-sidenav>

src/components/toast/toast.js

@@ -231,7 +231,7 @@ function MdToastProvider($$interimElementProvider) {
  function onShow(scope, element, options) {
  activeToastContent = options.content;
 
- element = $mdUtil.extractElementByName(element, 'md-toast');
+ element = $mdUtil.extractElementByName(element, 'md-toast', true);
  options.onSwipe = function(ev, gesture) {
  //Add swipeleft/swiperight class to element so it can animate correctly
  element.addClass('md-' + ev.type.replace('$md.',''));

src/core/util/animation/animateCss.js

@@ -315,7 +315,7 @@ if (angular.version.minor >= 4) {
 
  function parseMaxTime(str) {
  var maxValue = 0;
- var values = str.split(/\s*,\s*/);
+ var values = (str || "").split(/\s*,\s*/);
  forEach(values, function(value) {
  // it's always safe to consider only second values and omit `ms` values since
  // getComputedStyle will always handle the conversion for us

src/core/util/util.js

@@ -104,23 +104,50 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
  * </md-list>
  * </md-bottom-sheet>
  *</hljs>
- *
  **/
  findFocusTarget: function(containerEl, attributeVal) {
- var elToFocus, items = containerEl[0].querySelectorAll(attributeVal || '[md-autofocus]');
+ var AUTO_FOCUS = '[md-autofocus]';
+ var elToFocus;
 
- // Find the last child element with the focus attribute
- items.length && angular.forEach(items, function(it) {
- it = angular.element(it);
+ elToFocus = scanForFocusable(containerEl, attributeVal || AUTO_FOCUS);
 
-  // If the expression evaluates to FALSE, then it is not focusable target
- var focusExpression = it[0].getAttribute('md-autofocus');
- var isFocusable = focusExpression ? (it.scope().$eval(focusExpression) !== false ) : true;
+ if ( !elToFocus && attributeVal != AUTO_FOCUS) {
+ // Scan for deprecated attribute
+ elToFocus = scanForFocusable(containerEl, '[md-auto-focus]');
 
- if (isFocusable) elToFocus = it;
- });
+ if ( !elToFocus ) {
+ // Scan for fallback to 'universal' API
+ elToFocus = scanForFocusable(containerEl, AUTO_FOCUS);
+ }
+ }
 
  return elToFocus;
+
+ /**
+ * Can target and nested children for specified Selector (attribute)
+ * whose value may be an expression that evaluates to True/False.
+ */
+ function scanForFocusable(target, selector) {
+ var elFound, items = target[0].querySelectorAll(selector);
+
+ // Find the last child element with the focus attribute
+ if ( items && items.length ){
+ var EXP_ATTR = /\s*\[?([\-a-z]*)\]?\s*/i;
+ var matches = EXP_ATTR.exec(selector);
+ var attribute = matches ? matches[1] : null;
+
+ items.length && angular.forEach(items, function(it) {
+ it = angular.element(it);
+
+ // If the expression evaluates to FALSE, then it is not focusable target
+ var focusExpression = it[0].getAttribute(attribute);
+ var isFocusable = focusExpression ? (it.scope().$eval(focusExpression) !== false ) : true;
+
+ if (isFocusable) elFound = it;
+ });
+ }
+ return elFound;
+ }
  },
 
  // Disables scroll around the passed element.
@@ -168,11 +195,10 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
  // (arrow keys, spacebar, tab, etc).
  function disableKeyNav(e) {
  //-- temporarily removed this logic, will possibly re-add at a later date
- return;
- if (!element[0].contains(e.target)) {
- e.preventDefault();
- e.stopImmediatePropagation();
- }
+ //if (!element[0].contains(e.target)) {
+ // e.preventDefault();
+ // e.stopImmediatePropagation();
+ //}
  }
 
  function preventDefault(e) {
@@ -455,16 +481,58 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
  /**
  * Functional equivalent for $element.filter(‘md-bottom-sheet’)
  * useful with interimElements where the element and its container are important...
+ *
+ * @param {[]} elements to scan
+ * @param {string} name of node to find (e.g. 'md-dialog')
+ * @param {boolean=} optional flag to allow deep scans; defaults to 'false'.
  */
- extractElementByName: function(element, nodeName) {
- for (var i = 0, len = element.length; i < len; i++) {
- if (element[i].nodeName.toLowerCase() === nodeName) {
- return angular.element(element[i]);
+ extractElementByName: function(element, nodeName, scanDeep, warnNotFound) {
+ var found = scanTree(element);
+ if (!found && !!warnNotFound) {
+ $log.warn( $mdUtil.supplant("Unable to find node '{0}' in element.",[nodeName]) );
+ }
+
+ return angular.element(found || element);
+
+ /**
+ * Breadth-First tree scan for element with matching `nodeName`
+ */
+ function scanTree(element) {
+ return scanLevel(element) || (!!scanDeep ? scanChildren(element) : null);
+ }
+
+ /**
+ * Case-insensitive scan of current elements only (do not descend).
+ */
+ function scanLevel(element) {
+ if ( element ) {
+ for (var i = 0, len = element.length; i < len; i++) {
+ if (element[i].nodeName.toLowerCase() === nodeName) {
+ return element[i];
+ }
+ }
+ }
+ return null;
+ }
+
+ /**
+ * Scan children of specified node
+ */
+ function scanChildren(element) {
+ var found;
+ if ( element ) {
+ for (var i = 0, len = element.length; i < len; i++) {
+ var target = element[i];
+ if ( !found ) {
+ for (var j = 0, numChild = target.childNodes.length; j < numChild; j++) {
+ found = found || scanTree([target.childNodes[j]]);
+ }
+ }
+ }
  }
+ return found;
  }
 
- $log.warn( $mdUtil.supplant("Unable to find node '{0}' in element.",[nodeName]) );
- return element;
  },
 
  /**

src/core/util/util.spec.js

@@ -46,6 +46,94 @@ describe('util', function() {
 
  });
 
+
+ describe('findFocusTarget', function() {
+
+ it('should not find valid focus target', inject(function($rootScope, $compile, $mdUtil) {
+ var widget = $compile('<div class="autoFocus"><button><img></button></div>')($rootScope);
+ $rootScope.$apply();
+ var target = $mdUtil.findFocusTarget(widget);
+
+ expect(target).toBeFalsy();
+ }));
+
+ it('should find valid a valid focusTarget with "md-autofocus"', inject(function($rootScope, $compile, $mdUtil) {
+ var widget = $compile('<div class="autoFocus"><button md-autofocus><img></button></div>')($rootScope);
+ $rootScope.$apply();
+ var target = $mdUtil.findFocusTarget(widget);
+
+ expect(target[0].nodeName).toBe("BUTTON");
+ }));
+
+ it('should find valid a valid focusTarget with "md-auto-focus"', inject(function($rootScope, $compile, $mdUtil) {
+ var widget = $compile('<div class="autoFocus"><button md-auto-focus><img></button></div>')($rootScope);
+ $rootScope.$apply();
+ var target = $mdUtil.findFocusTarget(widget);
+
+ expect(target[0].nodeName).toBe("BUTTON");
+ }));
+
+ it('should find valid a valid focusTarget with "md-auto-focus" argument', inject(function($rootScope, $compile, $mdUtil) {
+ var widget = $compile('<div class="autoFocus"><button md-autofocus><img></button></div>')($rootScope);
+ $rootScope.$apply();
+ var target = $mdUtil.findFocusTarget(widget,'[md-auto-focus]');
+
+ expect(target[0].nodeName).toBe("BUTTON");
+ }));
+
+ it('should find valid a valid focusTarget with a deep "md-autofocus" argument', inject(function($rootScope, $compile, $mdUtil) {
+ var widget = $compile('<div class="autoFocus"><md-sidenav><button md-autofocus><img></button></md-sidenav></div>')($rootScope);
+ $rootScope.$apply();
+ var target = $mdUtil.findFocusTarget(widget);
+
+ expect(target[0].nodeName).toBe("BUTTON");
+ }));
+
+ it('should find valid a valid focusTarget with a deep "md-sidenav-focus" argument', inject(function($rootScope, $compile, $mdUtil) {
+ var template = '' +
+ '<div class="autoFocus">' +
+ ' <md-sidenav>' +
+ ' <button md-sidenav-focus>' +
+ ' <img>' +
+ ' </button>' +
+ ' </md-sidenav>' +
+ '</div>';
+ var widget = $compile(template)($rootScope);
+ $rootScope.$apply();
+ var target = $mdUtil.findFocusTarget(widget,'[md-sidenav-focus]');
+
+ expect(target[0].nodeName).toBe("BUTTON");
+ }));
+ });
+
+ describe('extractElementByname', function() {
+
+ it('should not find valid element', inject(function($rootScope, $compile, $mdUtil) {
+ var widget = $compile('<div><md-button1><img></md-button1></div>')($rootScope);
+ $rootScope.$apply();
+ var target = $mdUtil.extractElementByName(widget, 'md-button');
+
+ // Returns same element
+ expect( target === widget ).toBe(true);
+ }));
+
+ it('should not find valid element for shallow scan', inject(function($rootScope, $compile, $mdUtil) {
+ var widget = $compile('<div><md-button><img></md-button></div>')($rootScope);
+ $rootScope.$apply();
+ var target = $mdUtil.extractElementByName(widget, 'md-button');
+
+ expect( target !== widget ).toBe(false);
+ }));
+
+ it('should find valid element for deep scan', inject(function($rootScope, $compile, $mdUtil) {
+ var widget = $compile('<div><md-button><img></md-button></div>')($rootScope);
+ $rootScope.$apply();
+ var target = $mdUtil.extractElementByName(widget, 'md-button', true);
+
+ expect( target !== widget ).toBe(true);
+ }));
+ });
+
  describe('throttle', function() {
  var delay = 500;
  var nowMockValue;