fix(accordion): accept ids that start with a digit (#4196)

Closes #4195
ng-bootstrap · Apr 7, 2022 · ab87fc7 · ab87fc7
1 parent 5ce1c49
commit ab87fc7
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 12 deletions.
diff --git a/src/accordion/accordion.module.ts b/src/accordion/accordion.module.ts
@@ -1,7 +1,15 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 
-import {NgbAccordion, NgbPanel, NgbPanelTitle, NgbPanelContent, NgbPanelHeader, NgbPanelToggle} from './accordion';
+import {
+  NgbAccordion,
+  NgbPanel,
+  NgbPanelTitle,
+  NgbPanelContent,
+  NgbPanelHeader,
+  NgbPanelToggle,
+  NgbRefDirective
+} from './accordion';
 
 export {
   NgbAccordion,
@@ -18,6 +26,10 @@ export {NgbAccordionConfig} from './accordion-config';
 const NGB_ACCORDION_DIRECTIVES =
     [NgbAccordion, NgbPanel, NgbPanelTitle, NgbPanelContent, NgbPanelHeader, NgbPanelToggle];
 
-@NgModule({declarations: NGB_ACCORDION_DIRECTIVES, exports: NGB_ACCORDION_DIRECTIVES, imports: [CommonModule]})
+@NgModule({
+  declarations: [NgbRefDirective, ...NGB_ACCORDION_DIRECTIVES],
+  exports: NGB_ACCORDION_DIRECTIVES,
+  imports: [CommonModule]
+})
 export class NgbAccordionModule {
 }
diff --git a/src/accordion/accordion.spec.ts b/src/accordion/accordion.spec.ts
@@ -75,6 +75,19 @@ describe('ngb-accordion', () => {
     expect(accordionCmp.closeOtherPanels).toBe(defaultConfig.closeOthers);
   });
 
+  it('should panel authorize number as Ids', () => {
+    const testCompFixture = TestBed.createComponent(TestComponent);
+    const testComp = testCompFixture.componentInstance;
+    testComp.panels = [
+      {id: '1', disabled: false, title: 'Panel 1', content: 'foo', type: ''},
+      {id: '2', disabled: false, title: 'Panel 2', content: 'bar', type: ''},
+      {id: '3', disabled: false, title: 'Panel 3', content: 'baz', type: ''}
+    ];
+    testComp.activeIds = ['2'];
+    testCompFixture.detectChanges();
+    expectOpenPanels(testCompFixture.nativeElement, [false, true, false]);
+  });
+
   it('should have no open panels', () => {
     const fixture = TestBed.createComponent(TestComponent);
     const accordionEl = fixture.nativeElement.children[0];

diff --git a/src/accordion/accordion.ts b/src/accordion/accordion.ts
@@ -14,6 +14,8 @@ import {
   TemplateRef,
   ViewEncapsulation,
   NgZone,
+  OnInit,
+  OnDestroy,
 } from '@angular/core';
 
 import {isString} from '../util/util';
@@ -134,6 +136,7 @@ export class NgbPanel implements AfterContentChecked {
   titleTpl: NgbPanelTitle;
   headerTpl: NgbPanelHeader;
   contentTpl: NgbPanelContent;
+  panelDiv: HTMLElement | null;
 
   @ContentChildren(NgbPanelTitle, {descendants: false}) titleTpls: QueryList<NgbPanelTitle>;
   @ContentChildren(NgbPanelHeader, {descendants: false}) headerTpls: QueryList<NgbPanelHeader>;
@@ -172,6 +175,16 @@ export interface NgbPanelChangeEvent {
   preventDefault: () => void;
 }
 
+@Directive({selector: '[ngbRef]'})
+export class NgbRefDirective implements OnInit, OnDestroy {
+  @Output() ngbRef = new EventEmitter<HTMLElement | null>();
+  constructor(private _El: ElementRef) {}
+
+  ngOnInit() { this.ngbRef.emit(this._El.nativeElement); }
+
+  ngOnDestroy() { this.ngbRef.emit(null); }
+}
+
 /**
  * Accordion is a collection of collapsible panels (bootstrap cards).
  *
@@ -195,7 +208,7 @@ export interface NgbPanelChangeEvent {
           <ng-template [ngTemplateOutlet]="panel.headerTpl?.templateRef || t"
                        [ngTemplateOutletContext]="{$implicit: panel, opened: panel.isOpen}"></ng-template>
         </div>
-        <div id="{{panel.id}}" role="tabpanel" [attr.aria-labelledby]="panel.id + '-header'"
+        <div id="{{panel.id}}" (ngbRef)="panel.panelDiv = $event" role="tabpanel" [attr.aria-labelledby]="panel.id + '-header'"
              *ngIf="!destroyOnHide || panel.isOpen || panel.transitionRunning">
           <div class="card-body">
                <ng-template [ngTemplateOutlet]="panel.contentTpl?.templateRef || null"></ng-template>
@@ -265,9 +278,7 @@ export class NgbAccordion implements AfterContentChecked {
    */
   @Output() hidden = new EventEmitter<string>();
 
-  constructor(
-      config: NgbAccordionConfig, private _element: ElementRef, private _ngZone: NgZone,
-      private _changeDetector: ChangeDetectorRef) {
+  constructor(config: NgbAccordionConfig, private _ngZone: NgZone, private _changeDetector: ChangeDetectorRef) {
     this.animation = config.animation;
     this.type = config.type;
     this.closeOtherPanels = config.closeOthers;
@@ -344,7 +355,7 @@ export class NgbAccordion implements AfterContentChecked {
     // Setup the initial classes here
     this._ngZone.onStable.pipe(take(1)).subscribe(() => {
       this.panels.forEach(panel => {
-        const panelElement = this._getPanelElement(panel.id);
+        const panelElement = panel.panelDiv;
         if (panelElement) {
           if (!panel.initClassDone) {
             panel.initClassDone = true;
@@ -406,7 +417,7 @@ export class NgbAccordion implements AfterContentChecked {
       // When panel.transitionRunning is true, the transition needs to be started OR reversed,
       // The direction (show or hide) is choosen by each panel.isOpen state
       if (panel.transitionRunning) {
-        const panelElement = this._getPanelElement(panel.id);
+        const panelElement = panel.panelDiv;
         ngbRunTransition(this._ngZone, panelElement !, ngbCollapsingTransition, {
           animation,
           runningTransition: 'stop',
@@ -425,10 +436,6 @@ export class NgbAccordion implements AfterContentChecked {
       }
     });
   }
-
-  private _getPanelElement(panelId: string): HTMLElement | null {
-    return this._element.nativeElement.querySelector('#' + panelId);
-  }
 }
 
 /**