fix(accordion): expand only one panel when SingleBranchExpand is true

Author: MonikaKirkova

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

@@ -104,6 +104,7 @@ describe('Rendering Tests', () => {
 
             expect(accordion.panelCollapsed.emit).toHaveBeenCalledTimes(3);
 
+            accordion.panels[0].expand();
             accordion.panels[1].expand();
             tick();
             fix.detectChanges();

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

@@ -196,6 +196,7 @@ export class IgxAccordionComponent implements AfterContentInit, AfterViewInit, O
     private _panels!: QueryList<IgxExpansionPanelComponent>;
     private _animationSettings!: ToggleAnimationSettings;
     private _expandedPanels!: Set<IgxExpansionPanelComponent>;
+    private _expandingPanels!: Set<IgxExpansionPanelComponent>;
     private _destroy$ = new Subject<void>();
     private _unsubChildren$ = new Subject<void>();
     private _enabledPanels!: IgxExpansionPanelComponent[];
@@ -210,6 +211,7 @@ export class IgxAccordionComponent implements AfterContentInit, AfterViewInit, O
     /** @hidden @internal **/
     public ngAfterViewInit(): void {
         this._expandedPanels = new Set<IgxExpansionPanelComponent>(this._panels.filter(panel => !panel.collapsed));
+        this._expandingPanels = new Set<IgxExpansionPanelComponent>();
         this._panels.changes.pipe(takeUntil(this._destroy$)).subscribe(() => {
             this.subToChanges();
         });
@@ -320,28 +322,44 @@ export class IgxAccordionComponent implements AfterContentInit, AfterViewInit, O
         this._panels.forEach(panel => {
             panel.contentExpanded.pipe(takeUntil(this._unsubChildren$)).subscribe((args: IExpansionPanelEventArgs) => {
                 this._expandedPanels.add(args.owner);
+                this._expandingPanels.delete(args.owner);
                 const evArgs: IAccordionEventArgs = { ...args, owner: this, panel: args.owner };
                 this.panelExpanded.emit(evArgs);
             });
             panel.contentExpanding.pipe(takeUntil(this._unsubChildren$)).subscribe((args: IExpansionPanelCancelableEventArgs) => {
                 if (args.cancel) {
                     return;
                 }
+                const evArgs: IAccordionCancelableEventArgs = { ...args, owner: this, panel: args.owner };
+                this.panelExpanding.emit(evArgs);
+                if (evArgs.cancel) {
+                    args.cancel = true;
+                    this._expandedPanels.delete(args.owner);
+                    return;
+                }
                 if (this.singleBranchExpand) {
                     this._expandedPanels.forEach(p => {
                         if (!p.header.disabled) {
                             p.collapse();
                         }
                     });
-                }
-                const evArgs: IAccordionCancelableEventArgs = { ...args, owner: this, panel: args.owner };
-                this.panelExpanding.emit(evArgs);
-                if (evArgs.cancel) {
-                    args.cancel = true;
+                    this._expandingPanels.forEach(p => {
+                        if (!p.header.disabled) {
+                            if (!p.animationSettings.closeAnimation) {
+                                p.openAnimationPlayer?.reset();
+                            }
+                            if (!p.animationSettings.openAnimation) {
+                                p.closeAnimationPlayer?.reset();
+                            }
+                            p.collapse();
+                        }
+                    });
+                    this._expandingPanels.add(args.owner);
                 }
             });
             panel.contentCollapsed.pipe(takeUntil(this._unsubChildren$)).subscribe((args: IExpansionPanelEventArgs) => {
                 this._expandedPanels.delete(args.owner);
+                this._expandingPanels.delete(args.owner);
                 const evArgs: IAccordionEventArgs = { ...args, owner: this, panel: args.owner };
                 this.panelCollapsed.emit(evArgs);
             });