Added checks to the accordion class to ensure that the accordion is a…

…ctually the active element. The functions for keypresses were running and thereby changing the selected component
primefaces · May 1, 2024 · d08a412 · d08a412
1 parent 5581aca
commit d08a412
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git a/src/app/components/accordion/accordion.ts b/src/app/components/accordion/accordion.ts
@@ -25,9 +25,9 @@ import { BlockableUI, Header, PrimeTemplate, SharedModule } from 'primeng/api';
 import { DomHandler } from 'primeng/dom';
 import { ChevronDownIcon } from 'primeng/icons/chevrondown';
 import { ChevronRightIcon } from 'primeng/icons/chevronright';
+import { UniqueComponentId } from 'primeng/utils';
 import { Subscription } from 'rxjs';
 import { AccordionTabCloseEvent, AccordionTabOpenEvent } from './accordion.interface';
-import { UniqueComponentId } from 'primeng/utils';
 
 /**
  * AccordionTab is a helper component for Accordion.
@@ -475,7 +475,7 @@ export class Accordion implements BlockableUI, AfterContentInit, OnDestroy {
     }
 
     onTabArrowDownKey(event) {
-        if (!this.isInput(event) && !this.isTextArea(event)) {
+        if (!this.isInput(event) && !this.isTextArea(event) && document.activeElement.className == 'p-accordion-header-link') {
             const nextHeaderAction = this.findNextHeaderAction(event.target.parentElement.parentElement.parentElement);
             nextHeaderAction ? this.changeFocusedTab(nextHeaderAction) : this.onTabHomeKey(event);
 
@@ -484,7 +484,7 @@ export class Accordion implements BlockableUI, AfterContentInit, OnDestroy {
     }
 
     onTabArrowUpKey(event) {
-        if (!this.isInput(event) && !this.isTextArea(event)) {
+        if (!this.isInput(event) && !this.isTextArea(event)  && document.activeElement.className == 'p-accordion-header-link') {
             const prevHeaderAction = this.findPrevHeaderAction(event.target.parentElement.parentElement.parentElement);
             prevHeaderAction ? this.changeFocusedTab(prevHeaderAction) : this.onTabEndKey(event);
 
@@ -493,9 +493,11 @@ export class Accordion implements BlockableUI, AfterContentInit, OnDestroy {
     }
 
     onTabHomeKey(event) {
-        const firstHeaderAction = this.findFirstHeaderAction();
-        this.changeFocusedTab(firstHeaderAction);
-        event.preventDefault();
+        if(document.activeElement.className == 'p-accordion-header-link'){
+            const firstHeaderAction = this.findFirstHeaderAction();
+            this.changeFocusedTab(firstHeaderAction);
+            event.preventDefault();
+        }
     }
 
     changeFocusedTab(element) {
@@ -562,9 +564,11 @@ export class Accordion implements BlockableUI, AfterContentInit, OnDestroy {
     }
 
     onTabEndKey(event) {
-        const lastHeaderAction = this.findLastHeaderAction();
-        this.changeFocusedTab(lastHeaderAction);
-        event.preventDefault();
+        if(document.activeElement.className == 'p-accordion-header-link'){
+            const lastHeaderAction = this.findLastHeaderAction();
+            this.changeFocusedTab(lastHeaderAction);
+            event.preventDefault();
+        }
     }
 
     ngAfterContentInit() {

diff --git a/src/app/showcase/doc/accordion/accordiondoc.module.ts b/src/app/showcase/doc/accordion/accordiondoc.module.ts
@@ -1,13 +1,14 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
 import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
 import { AccordionModule } from 'primeng/accordion';
-import { ButtonModule } from 'primeng/button';
 import { AvatarModule } from 'primeng/avatar';
 import { BadgeModule } from 'primeng/badge';
-import { AppDocModule } from '../../layout/doc/app.doc.module';
+import { ButtonModule } from 'primeng/button';
+import { DropdownModule } from 'primeng/dropdown';
 import { AppCodeModule } from '../../layout/doc/app.code.component';
+import { AppDocModule } from '../../layout/doc/app.doc.module';
 import { AccessibilityDoc } from './accessibilitydoc';
 import { BasicDoc } from './basicdoc';
 import { ControlledDoc } from './controlleddoc';
@@ -18,7 +19,7 @@ import { StyleDoc } from './styledoc';
 import { TemplateDoc } from './templatedoc';
 
 @NgModule({
-    imports: [CommonModule, AppCodeModule, AppDocModule, AccordionModule, ButtonModule, RouterModule, AvatarModule, BadgeModule, FormsModule],
+    imports: [CommonModule, AppCodeModule, AppDocModule, AccordionModule, ButtonModule, RouterModule, AvatarModule, DropdownModule, BadgeModule, FormsModule],
     exports: [AppDocModule],
     declarations: [ImportDoc, BasicDoc, MultipleDoc, DisabledDoc, ControlledDoc, TemplateDoc, StyleDoc, AccessibilityDoc]
 })