fix(collapse): avoid initial animation when expanded

- Ensures collapse does not animate expanding when initialized as expanded Closes #5199 Fixes #4414 Fixes #5192
angular-ui · Jan 15, 2016 · 57219aa · 57219aa
1 parent 907c851
commit 57219aa
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 9 deletions.
diff --git a/src/collapse/collapse.js b/src/collapse/collapse.js
@@ -12,10 +12,16 @@ angular.module('ui.bootstrap.collapse', [])
         if (!scope.$eval(attrs.uibCollapse)) {
           element.addClass('in')
             .addClass('collapse')
+            .attr('aria-expanded', true)
+            .attr('aria-hidden', false)
             .css({height: 'auto'});
         }
 
         function expand() {
+          if (element.hasClass('collapse') && element.hasClass('in')) {
+            return;
+          }
+
           $q.resolve(expandingExpr(scope))
             .then(function() {
               element.removeClass('collapse')

diff --git a/src/collapse/test/collapse.spec.js b/src/collapse/test/collapse.spec.js
@@ -52,11 +52,22 @@ describe('collapse directive', function() {
     assertCallbacks({ collapsed: true });
   });
 
+  it('should not trigger any animation on initialization if isCollapsed = true', function() {
+    var wrapperFn = function() {
+      $animate.flush();
+    };
+
+    scope.isCollapsed = true;
+    compileFn(scope);
+    scope.$digest();
+
+    expect(wrapperFn).toThrowError(/No pending animations ready to be closed or flushed/);
+  });
+
   it('should collapse if isCollapsed = true on subsequent use', function() {
     scope.isCollapsed = false;
     compileFn(scope);
     scope.$digest();
-    $animate.flush();
     initCallbacks();
     scope.isCollapsed = true;
     scope.$digest();
@@ -65,21 +76,38 @@ describe('collapse directive', function() {
     assertCallbacks({ collapsing: true, collapsed: true });
   });
 
-  it('should be shown on initialization if isCollapsed = false', function() {
+  it('should show after toggled from collapsed', function() {
     initCallbacks();
-    scope.isCollapsed = false;
+    scope.isCollapsed = true;
     compileFn(scope);
     scope.$digest();
+    expect(element.height()).toBe(0);
+    assertCallbacks({ collapsed: true });
+    scope.collapsed.calls.reset();
+
+    scope.isCollapsed = false;
+    scope.$digest();
     $animate.flush();
     expect(element.height()).not.toBe(0);
     assertCallbacks({ expanding: true, expanded: true });
   });
 
+  it('should not trigger any animation on initialization if isCollapsed = false', function() {
+    var wrapperFn = function() {
+      $animate.flush();
+    };
+
+    scope.isCollapsed = false;
+    compileFn(scope);
+    scope.$digest();
+
+    expect(wrapperFn).toThrowError(/No pending animations ready to be closed or flushed/);
+  });
+
   it('should expand if isCollapsed = false on subsequent use', function() {
     scope.isCollapsed = false;
     compileFn(scope);
     scope.$digest();
-    $animate.flush();
     scope.isCollapsed = true;
     scope.$digest();
     $animate.flush();
@@ -95,7 +123,6 @@ describe('collapse directive', function() {
     scope.isCollapsed = false;
     compileFn(scope);
     scope.$digest();
-    $animate.flush();
     scope.isCollapsed = true;
     scope.$digest();
     $animate.flush();
@@ -114,7 +141,6 @@ describe('collapse directive', function() {
     scope.isCollapsed = false;
     compileFn(scope);
     scope.$digest();
-    $animate.flush();
     expect(element.attr('aria-expanded')).toBe('true');
 
     scope.isCollapsed = true;
@@ -127,7 +153,6 @@ describe('collapse directive', function() {
     scope.isCollapsed = false;
     compileFn(scope);
     scope.$digest();
-    $animate.flush();
     expect(element.attr('aria-hidden')).toBe('false');
 
     scope.isCollapsed = true;
@@ -153,7 +178,6 @@ describe('collapse directive', function() {
       scope.exp = false;
       scope.isCollapsed = false;
       scope.$digest();
-      $animate.flush();
       var collapseHeight = element.height();
       scope.exp = true;
       scope.$digest();
@@ -164,7 +188,6 @@ describe('collapse directive', function() {
       scope.exp = true;
       scope.isCollapsed = false;
       scope.$digest();
-      $animate.flush();
       var collapseHeight = element.height();
       scope.exp = false;
       scope.$digest();