Merge pull request #10654 from IgniteUI/mevtimov/fix-10509-13.0.x

Collapse expanded panels when setting singleBranchExpand to true 13.0.x

Author: teodosiah

projects/igniteui-angular/src/lib/accordion/accordion.component.spec.ts

@@ -166,6 +166,29 @@ describe('Rendering Tests', () => {
             expect(accordion.panelCollapsed.emit).toHaveBeenCalledTimes(5);
         }));
 
+        it(`Should collapse all expanded and not disabled panels except for the last one when setting singleBranchExpand to true`, () => {
+            expect(accordion.panels[0].collapsed).toBeTrue();
+            expect(accordion.panels[1].collapsed).toBeTrue();
+            expect(accordion.panels[2].collapsed).toBeFalse();
+            expect(accordion.panels[3].collapsed).toBeFalse();
+
+            accordion.panels[1].collapsed = false;
+            fix.detectChanges();
+
+            expect(accordion.panels[0].collapsed).toBeTrue();
+            expect(accordion.panels[1].collapsed).toBeFalse();
+            expect(accordion.panels[2].collapsed).toBeFalse();
+            expect(accordion.panels[3].collapsed).toBeFalse();
+
+            accordion.singleBranchExpand = true;
+            fix.detectChanges();
+
+            expect(accordion.panels[0].collapsed).toBeTrue();
+            expect(accordion.panels[1].collapsed).toBeTrue();
+            expect(accordion.panels[2].collapsed).toBeFalse();
+            expect(accordion.panels[3].collapsed).toBeFalse();
+        });
+
         it('Should emit ing and ed events when expand panel state is toggled', fakeAsync(() => {
             spyOn(accordion.panelExpanded, 'emit').and.callThrough();
             spyOn(accordion.panelExpanding, 'emit').and.callThrough();

projects/igniteui-angular/src/lib/accordion/accordion.component.ts

@@ -1,4 +1,4 @@
-import { AfterContentInit, AfterViewInit, Component, ContentChildren, EventEmitter,
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, Component, ContentChildren, EventEmitter,
     HostBinding, Input, OnDestroy, Output, QueryList } from '@angular/core';
 import { fromEvent, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -113,7 +113,16 @@ export class IgxAccordionComponent implements AfterContentInit, AfterViewInit, O
      * ```
      */
     @Input()
-    public singleBranchExpand = false;
+    public get singleBranchExpand(): boolean {
+        return this._singleBranchExpand;
+    }
+
+    public set singleBranchExpand(val: boolean) {
+        this._singleBranchExpand = val;
+        if (val) {
+            this.collapseAllExceptLast();
+        }
+    }
 
     /**
      * Emitted before a panel is expanded.
@@ -200,12 +209,16 @@ export class IgxAccordionComponent implements AfterContentInit, AfterViewInit, O
     private _destroy$ = new Subject<void>();
     private _unsubChildren$ = new Subject<void>();
     private _enabledPanels!: IgxExpansionPanelComponent[];
+    private _singleBranchExpand = false;
 
-    constructor() { }
+    constructor(private cdr: ChangeDetectorRef) { }
 
     /** @hidden @internal **/
     public ngAfterContentInit(): void {
         this.updatePanelsAnimation();
+        if (this.singleBranchExpand) {
+            this.collapseAllExceptLast();
+        }
     }
 
     /** @hidden @internal **/
@@ -256,6 +269,16 @@ export class IgxAccordionComponent implements AfterContentInit, AfterViewInit, O
         this.panels.forEach(panel => panel.collapse());
     }
 
+    private collapseAllExceptLast(): void {
+        const lastExpanded = this.panels?.filter(p => !p.collapsed && !p.header.disabled).pop();
+        this.panels?.forEach((p: IgxExpansionPanelComponent) => {
+            if (p !== lastExpanded && !p.header.disabled) {
+                p.collapsed = true;
+            }
+        });
+        this.cdr.detectChanges();
+    }
+
     private handleKeydown(event: KeyboardEvent, panel: IgxExpansionPanelComponent): void {
         const key = event.key.toLowerCase();
         if (!(ACCORDION_NAVIGATION_KEYS.has(key))) {