Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.

Commit 57219aa

Browse files
bogdanalexe90wesleycho
authored andcommitted
fix(collapse): avoid initial animation when expanded
- Ensures collapse does not animate expanding when initialized as expanded Closes #5199 Fixes #4414 Fixes #5192
1 parent 907c851 commit 57219aa

File tree

2 files changed

+38
-9
lines changed

2 files changed

+38
-9
lines changed

Diff for: src/collapse/collapse.js

+6
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,16 @@ angular.module('ui.bootstrap.collapse', [])
1212
if (!scope.$eval(attrs.uibCollapse)) {
1313
element.addClass('in')
1414
.addClass('collapse')
15+
.attr('aria-expanded', true)
16+
.attr('aria-hidden', false)
1517
.css({height: 'auto'});
1618
}
1719

1820
function expand() {
21+
if (element.hasClass('collapse') && element.hasClass('in')) {
22+
return;
23+
}
24+
1925
$q.resolve(expandingExpr(scope))
2026
.then(function() {
2127
element.removeClass('collapse')

Diff for: src/collapse/test/collapse.spec.js

+32-9
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,22 @@ describe('collapse directive', function() {
5252
assertCallbacks({ collapsed: true });
5353
});
5454

55+
it('should not trigger any animation on initialization if isCollapsed = true', function() {
56+
var wrapperFn = function() {
57+
$animate.flush();
58+
};
59+
60+
scope.isCollapsed = true;
61+
compileFn(scope);
62+
scope.$digest();
63+
64+
expect(wrapperFn).toThrowError(/No pending animations ready to be closed or flushed/);
65+
});
66+
5567
it('should collapse if isCollapsed = true on subsequent use', function() {
5668
scope.isCollapsed = false;
5769
compileFn(scope);
5870
scope.$digest();
59-
$animate.flush();
6071
initCallbacks();
6172
scope.isCollapsed = true;
6273
scope.$digest();
@@ -65,21 +76,38 @@ describe('collapse directive', function() {
6576
assertCallbacks({ collapsing: true, collapsed: true });
6677
});
6778

68-
it('should be shown on initialization if isCollapsed = false', function() {
79+
it('should show after toggled from collapsed', function() {
6980
initCallbacks();
70-
scope.isCollapsed = false;
81+
scope.isCollapsed = true;
7182
compileFn(scope);
7283
scope.$digest();
84+
expect(element.height()).toBe(0);
85+
assertCallbacks({ collapsed: true });
86+
scope.collapsed.calls.reset();
87+
88+
scope.isCollapsed = false;
89+
scope.$digest();
7390
$animate.flush();
7491
expect(element.height()).not.toBe(0);
7592
assertCallbacks({ expanding: true, expanded: true });
7693
});
7794

95+
it('should not trigger any animation on initialization if isCollapsed = false', function() {
96+
var wrapperFn = function() {
97+
$animate.flush();
98+
};
99+
100+
scope.isCollapsed = false;
101+
compileFn(scope);
102+
scope.$digest();
103+
104+
expect(wrapperFn).toThrowError(/No pending animations ready to be closed or flushed/);
105+
});
106+
78107
it('should expand if isCollapsed = false on subsequent use', function() {
79108
scope.isCollapsed = false;
80109
compileFn(scope);
81110
scope.$digest();
82-
$animate.flush();
83111
scope.isCollapsed = true;
84112
scope.$digest();
85113
$animate.flush();
@@ -95,7 +123,6 @@ describe('collapse directive', function() {
95123
scope.isCollapsed = false;
96124
compileFn(scope);
97125
scope.$digest();
98-
$animate.flush();
99126
scope.isCollapsed = true;
100127
scope.$digest();
101128
$animate.flush();
@@ -114,7 +141,6 @@ describe('collapse directive', function() {
114141
scope.isCollapsed = false;
115142
compileFn(scope);
116143
scope.$digest();
117-
$animate.flush();
118144
expect(element.attr('aria-expanded')).toBe('true');
119145

120146
scope.isCollapsed = true;
@@ -127,7 +153,6 @@ describe('collapse directive', function() {
127153
scope.isCollapsed = false;
128154
compileFn(scope);
129155
scope.$digest();
130-
$animate.flush();
131156
expect(element.attr('aria-hidden')).toBe('false');
132157

133158
scope.isCollapsed = true;
@@ -153,7 +178,6 @@ describe('collapse directive', function() {
153178
scope.exp = false;
154179
scope.isCollapsed = false;
155180
scope.$digest();
156-
$animate.flush();
157181
var collapseHeight = element.height();
158182
scope.exp = true;
159183
scope.$digest();
@@ -164,7 +188,6 @@ describe('collapse directive', function() {
164188
scope.exp = true;
165189
scope.isCollapsed = false;
166190
scope.$digest();
167-
$animate.flush();
168191
var collapseHeight = element.height();
169192
scope.exp = false;
170193
scope.$digest();

0 commit comments

Comments
 (0)