fix(module:collapse): can't fold up active panel with accordion (#2440)

close #2437
NG-ZORRO · Nov 13, 2018 · a17ea49 · a17ea49
1 parent 72b0f52
commit a17ea49
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/components/collapse/nz-collapse.component.ts b/components/collapse/nz-collapse.component.ts
@@ -43,7 +43,10 @@ export class NzCollapseComponent {
     if (this.nzAccordion) {
       this.listOfPanel.forEach(item => {
         const active = collapse === item;
-        if (item.nzActive !== active) {
+        if (active && item.nzActive === active) {
+          item.nzActive = false;
+          item.nzActiveChange.emit(item.nzActive);
+        } else if (item.nzActive !== active) {
           item.nzActive = active;
           item.nzActiveChange.emit(item.nzActive);
         }

diff --git a/components/collapse/nz-collapse.spec.ts b/components/collapse/nz-collapse.spec.ts
@@ -98,6 +98,32 @@ describe('collapse', () => {
       expect(testComponent.active01Change).toHaveBeenCalledTimes(2);
       expect(testComponent.active02Change).toHaveBeenCalledTimes(1);
     });
+    it('should click to fold up work with accordion', () => {
+      testComponent.accordion = true;
+      fixture.detectChanges();
+      expect(panels[ 0 ].nativeElement.classList).not.toContain('ant-collapse-item-active');
+      expect(testComponent.active01).toBe(false);
+      panels[ 0 ].nativeElement.querySelector('.ant-collapse-header').click();
+      fixture.detectChanges();
+      panels[ 1 ].nativeElement.querySelector('.ant-collapse-header').click();
+      fixture.detectChanges();
+      panels[ 0 ].nativeElement.querySelector('.ant-collapse-header').click();
+      fixture.detectChanges();
+      expect(testComponent.active01).toBe(true);
+      expect(testComponent.active02).toBe(false);
+      expect(panels[ 0 ].nativeElement.classList).toContain('ant-collapse-item-active');
+      expect(panels[ 1 ].nativeElement.classList).not.toContain('ant-collapse-item-active');
+      expect(testComponent.active01Change).toHaveBeenCalledTimes(3);
+      expect(testComponent.active02Change).toHaveBeenCalledTimes(2);
+      panels[ 0 ].nativeElement.querySelector('.ant-collapse-header').click();
+      fixture.detectChanges();
+      expect(testComponent.active01).toBe(false);
+      expect(testComponent.active02).toBe(false);
+      expect(panels[ 0 ].nativeElement.classList).not.toContain('ant-collapse-item-active');
+      expect(panels[ 1 ].nativeElement.classList).not.toContain('ant-collapse-item-active');
+      expect(testComponent.active01Change).toHaveBeenCalledTimes(4);
+      expect(testComponent.active02Change).toHaveBeenCalledTimes(2);
+    });
     it('should header work', () => {
       fixture.detectChanges();
       expect(panels[ 0 ].nativeElement.querySelector('.ant-collapse-header').innerText).toBe('string');