Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 1ed54bb

Browse files
committed
fix(toolbar): md-scroll-shrink conflicts with md-select in toolbar
- find the proper `md-content`, which should be a sibling of the toolbar - fix scroll shrink breaking if content scrolled too quickly after page load - improve JSDoc Fixes #10413. Closes #9871.
1 parent 103e19c commit 1ed54bb

File tree

3 files changed

+32
-25
lines changed

3 files changed

+32
-25
lines changed

src/components/toolbar/toolbar.js

+8-8
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ angular.module('material.components.toolbar', [
8282
*
8383
*/
8484

85-
function mdToolbarDirective($$rAF, $mdConstant, $mdUtil, $mdTheming, $animate) {
85+
function mdToolbarDirective($$rAF, $mdConstant, $mdUtil, $mdTheming, $animate, $timeout) {
8686
var translateY = angular.bind(null, $mdUtil.supplant, 'translate3d(0,{0}px,0)');
8787

8888
return {
@@ -141,16 +141,15 @@ function mdToolbarDirective($$rAF, $mdConstant, $mdUtil, $mdTheming, $animate) {
141141
scope.$on('$destroy', disableScrollShrink);
142142

143143
/**
144-
*
144+
* @param {string} shrinkWithScroll value of md-scroll-shrink attribute
145145
*/
146146
function onChangeScrollShrink(shrinkWithScroll) {
147147
var closestContent = $mdUtil.getSiblings(element, 'md-content');
148148

149-
// If we have a content element, fake the call; this might still fail
150-
// if the content element isn't a sibling of the toolbar
151-
149+
// If there are content elements, fake the call using the first content element.
150+
// This might still fail if the content element isn't a sibling of the toolbar.
152151
if (!contentElement && closestContent.length) {
153-
onMdContentLoad(null, closestContent);
152+
onMdContentLoad(null, closestContent[0]);
154153
}
155154

156155
// Evaluate the expression
@@ -165,7 +164,8 @@ function mdToolbarDirective($$rAF, $mdConstant, $mdUtil, $mdTheming, $animate) {
165164
}
166165

167166
/**
168-
*
167+
* @param {null} $event $mdContentLoaded always has a null event
168+
* @param {JQLite} newContentEl JQLite object containing an md-content
169169
*/
170170
function onMdContentLoad($event, newContentEl) {
171171
// Toolbar and content must be siblings
@@ -219,7 +219,7 @@ function mdToolbarDirective($$rAF, $mdConstant, $mdUtil, $mdTheming, $animate) {
219219
contentElement.on('scroll', debouncedContentScroll);
220220
contentElement.attr('scroll-shrink', 'true');
221221

222-
$mdUtil.nextTick(updateToolbarHeight, false);
222+
$timeout(updateToolbarHeight);
223223

224224
return function disableScrollShrink() {
225225
contentElement.off('scroll', debouncedContentScroll);

src/core/util/util.js

+10-5
Original file line numberDiff line numberDiff line change
@@ -603,18 +603,23 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
603603
},
604604

605605
/**
606-
* Get an element siblings matching a given tag name
606+
* Get an element's siblings matching a given tag name.
607607
*
608-
* @param el Element to start walking the DOM from
609-
* @param tagName Tag name to match
608+
* @param {JQLite|angular.element|HTMLElement} element Element to start walking the DOM from
609+
* @param {string} tagName HTML tag name to match against
610+
* @returns {Object[]} JQLite
610611
*/
611612
getSiblings: function getSiblings(element, tagName) {
612613
var upperCasedTagName = tagName.toUpperCase();
613-
if (element instanceof angular.element) element = element[0];
614+
if (element instanceof angular.element) {
615+
element = element[0];
616+
}
614617
var siblings = Array.prototype.filter.call(element.parentNode.children, function(node) {
615618
return element !== node && node.tagName.toUpperCase() === upperCasedTagName;
616619
});
617-
return angular.element(siblings);
620+
return siblings.map(function (sibling) {
621+
return angular.element(sibling);
622+
});
618623
},
619624

620625
/*

src/core/util/util.spec.js

+14-12
Original file line numberDiff line numberDiff line change
@@ -679,22 +679,24 @@ describe('util', function() {
679679
$mdUtil = _$mdUtil_;
680680
}));
681681

682-
it('should be able to get the siblings (wihout source element) of a particular node type', function() {
683-
var parent = angular.element('<h1>');
684-
var element = angular.element('<h2>');
685-
var sibling = angular.element('<h2>');
682+
it('should be able to get the siblings (without source element) of a particular node type',
683+
function () {
684+
var parent = angular.element('<h1>');
685+
var element = angular.element('<h2>');
686+
var sibling = angular.element('<h2>');
686687

687-
parent.append(element);
688-
parent.append(sibling);
688+
parent.append(element);
689+
parent.append(sibling);
689690

690-
var result = $mdUtil.getSiblings(element, 'h2');
691+
var result = $mdUtil.getSiblings(element, 'h2');
691692

692-
expect(result).toBeTruthy();
693-
expect(result.length).toBe(1);
694-
expect(result[0]).toBe(sibling[0]);
693+
expect(result).toBeTruthy();
694+
expect(result.length).toBe(1);
695+
// Get the first sibling and unwrap both jqLite wrappers
696+
expect(result[0][0]).toBe(sibling[0]);
695697

696-
parent.remove();
697-
});
698+
parent.remove();
699+
});
698700
});
699701

700702
describe('getClosest', function() {

0 commit comments

Comments
 (0)