fix(tabs): fix issue primefaces#16521 - close button not working with…

… ripple effect
wS2Zth · Oct 12, 2024 · d71095f · d71095f
1 parent b33aa8a
commit d71095f
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/components/tabs/style/tabsstyle.ts b/src/app/components/tabs/style/tabsstyle.ts
@@ -141,6 +141,10 @@ const theme = ({ dt }) => `
     background: ${dt('tabs.active.bar.background')};
     transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
 }
+
+.p-tabview-close {
+    z-index: 1;
+}
 `;
 
 const classes = {
@@ -208,6 +212,10 @@ export enum TabsClasses {
      * Class name of the tab panel element
      */
     tabpanel = 'p-tabs-panel',
+    /**
+     * Class name of the close icon
+     */
+    tablose = 'p-tabview-close',
 }
 
-export interface TabsStyle extends BaseStyle {}
+export interface TabsStyle extends BaseStyle { }
diff --git a/src/app/components/tabs/tabs.ts b/src/app/components/tabs/tabs.ts
@@ -333,7 +333,7 @@ export class TabPanel extends BaseComponent implements AfterContentInit, OnDestr
                                         @if (tab.closeIconTemplate) {
                                             <ng-template *ngTemplateOutlet="tab.closeIconTemplate"></ng-template>
                                         } @else {
-                                            <TimesIcon (click)="close($event, tab)" />
+                                            <TimesIcon class="p-tabview-close"  (click)="close($event, tab)" />
                                         }
                                     }
                                 }
@@ -700,7 +700,7 @@ export class Tabs extends BaseComponent implements AfterContentInit, AfterViewCh
 
         return headerElement
             ? DomHandler.getAttribute(headerElement, 'data-p-disabled') ||
-              DomHandler.getAttribute(headerElement, 'data-pc-section') === 'inkbar'
+                DomHandler.getAttribute(headerElement, 'data-pc-section') === 'inkbar'
                 ? this.findNextHeaderAction(headerElement)
                 : headerElement
             : null;
@@ -711,7 +711,7 @@ export class Tabs extends BaseComponent implements AfterContentInit, AfterViewCh
 
         return headerElement
             ? DomHandler.getAttribute(headerElement, 'data-p-disabled') ||
-              DomHandler.getAttribute(headerElement, 'data-pc-section') === 'inkbar'
+                DomHandler.getAttribute(headerElement, 'data-pc-section') === 'inkbar'
                 ? this.findPrevHeaderAction(headerElement)
                 : headerElement
             : null;
@@ -903,4 +903,4 @@ export class Tabs extends BaseComponent implements AfterContentInit, AfterViewCh
     imports: [Tabs, TabPanel],
     exports: [Tabs, TabPanel, SharedModule],
 })
-export class TabsModule {}
+export class TabsModule { }