fix(accordion): collapse expanded panels when setting singleBranchExpand to true

Author: mmart1n

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

@@ -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() { }
 
     /** @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;
+                p.cdr.detectChanges();
+            }
+        });
+    }
+
     private handleKeydown(event: KeyboardEvent, panel: IgxExpansionPanelComponent): void {
         const key = event.key.toLowerCase();
         if (!(ACCORDION_NAVIGATION_KEYS.has(key))) {

projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts

@@ -199,7 +199,7 @@ export class IgxExpansionPanelComponent extends ToggleAnimationPlayer implements
 
     private _collapsed = true;
 
-    constructor(private cdr: ChangeDetectorRef, protected builder: AnimationBuilder, private elementRef?: ElementRef) {
+    constructor(public cdr: ChangeDetectorRef, protected builder: AnimationBuilder, private elementRef?: ElementRef) {
         super(builder);
     }