Merge remote-tracking branch 'origin' into issue-15998

src/app/components/button/button.ts

@@ -346,7 +346,8 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
     host: {
-        class: 'p-element'
+        class: 'p-element',
+        '[class.p-disabled]': 'disabled' || 'loading'
     }
 })
 export class Button implements AfterContentInit {
@@ -521,7 +522,6 @@ export class Button implements AfterContentInit {
             'p-button p-component': true,
             'p-button-icon-only': (this.icon || this.iconTemplate || this.loadingIcon || this.loadingIconTemplate) && !this.label,
             'p-button-vertical': (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label,
-            'p-disabled': this.disabled || this.loading,
             'p-button-loading': this.loading,
             'p-button-loading-label-only': this.loading && !this.icon && this.label && !this.loadingIcon && this.iconPos === 'left',
             'p-button-link': this.link,

src/app/components/calendar/calendar.ts

@@ -1169,7 +1169,15 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor {
         return this.currentView === 'year' ? this.getTranslation('nextDecade') : this.currentView === 'month' ? this.getTranslation('nextYear') : this.getTranslation('nextMonth');
     }
 
-    constructor(@Inject(DOCUMENT) private document: Document, public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, private zone: NgZone, private config: PrimeNGConfig, public overlayService: OverlayService) {
+    constructor(
+        @Inject(DOCUMENT) private document: Document,
+        public el: ElementRef,
+        public renderer: Renderer2,
+        public cd: ChangeDetectorRef,
+        private zone: NgZone,
+        private config: PrimeNGConfig,
+        public overlayService: OverlayService
+    ) {
         this.window = this.document.defaultView as Window;
     }
 

src/app/components/carousel/carousel.ts

@@ -357,7 +357,15 @@ export class Carousel implements AfterContentInit {
 
     window: Window;
 
-    constructor(public el: ElementRef, public zone: NgZone, public cd: ChangeDetectorRef, private renderer: Renderer2, @Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: any, private config: PrimeNGConfig) {
+    constructor(
+        public el: ElementRef,
+        public zone: NgZone,
+        public cd: ChangeDetectorRef,
+        private renderer: Renderer2,
+        @Inject(DOCUMENT) private document: Document,
+        @Inject(PLATFORM_ID) private platformId: any,
+        private config: PrimeNGConfig
+    ) {
         this.totalShiftedItems = this.page * this.numScroll * -1;
         this.window = this.document.defaultView as Window;
     }

src/app/components/confirmdialog/confirmdialog.ts

@@ -442,7 +442,15 @@ export class ConfirmDialog implements AfterContentInit, OnInit, OnDestroy {
 
     translationSubscription: Subscription | undefined;
 
-    constructor(public el: ElementRef, public renderer: Renderer2, private confirmationService: ConfirmationService, public zone: NgZone, private cd: ChangeDetectorRef, public config: PrimeNGConfig, @Inject(DOCUMENT) private document: Document) {
+    constructor(
+        public el: ElementRef,
+        public renderer: Renderer2,
+        private confirmationService: ConfirmationService,
+        public zone: NgZone,
+        private cd: ChangeDetectorRef,
+        public config: PrimeNGConfig,
+        @Inject(DOCUMENT) private document: Document
+    ) {
         this.subscription = this.confirmationService.requireConfirmation$.subscribe((confirmation) => {
             if (!confirmation) {
                 this.hide();

src/app/components/dialog/dialog.ts

@@ -606,20 +606,47 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy {
         return this.header !== null ? UniqueComponentId() + '_header' : null;
     }
 
+    parseDurationToMilliseconds(durationString: string): number | undefined {
+        const transitionTimeRegex = /([\d\.]+)(ms|s)\b/g;
+        let totalMilliseconds = 0;
+        let match;
+
+        while ((match = transitionTimeRegex.exec(durationString)) !== null) {
+            const value = parseFloat(match[1]);
+            const unit = match[2];
+
+            if (unit === 'ms') {
+                totalMilliseconds += value;
+            } else if (unit === 's') {
+                totalMilliseconds += value * 1000;
+            }
+        }
+
+        if (totalMilliseconds === 0) {
+            return undefined;
+        }
+
+        return totalMilliseconds;
+    }
+
     focus(focusParentElement = this.contentViewChild?.nativeElement) {
+        const timeoutDuration = this.parseDurationToMilliseconds(this.transitionOptions);
+
         let focusable = DomHandler.getFocusableElement(focusParentElement, '[autofocus]');
+
         if (focusable) {
             this.zone.runOutsideAngular(() => {
-                setTimeout(() => focusable.focus(), 5);
+                setTimeout(() => focusable.focus(), timeoutDuration || 5);
             });
             return;
         }
         const focusableElement = DomHandler.getFocusableElement(focusParentElement);
+
         if (focusableElement) {
             this.zone.runOutsideAngular(() => {
-                setTimeout(() => focusableElement.focus(), 5);
+                setTimeout(() => focusableElement.focus(), timeoutDuration || 5);
             });
-        } else if (this.footerViewChild) {
+        } else if (this.footerViewChild && focusParentElement !== this.footerViewChild.nativeElement) {
             // If the content section is empty try to focus on footer
             this.focus(this.footerViewChild.nativeElement);
         }

src/app/components/dropdown/dropdown.ts

@@ -1238,6 +1238,10 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
     }
 
     updatePlaceHolderForFloatingLabel(): void {
+        if(this._placeholder() !== null && this._placeholder() !== undefined) {
+            // We don't want to overwrite the placeholder if it's already set
+            return;
+        }
         const parentElement = this.el.nativeElement.parentElement;
         const isInFloatingLabel = parentElement?.classList.contains('p-float-label');
         if (parentElement && isInFloatingLabel && !this.selectedOption) {
@@ -1835,7 +1839,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
     }
 
     hasFocusableElements() {
-        return DomHandler.getFocusableElements(this.overlayViewChild.overlayViewChild.nativeElement, ':not([data-p-hidden-focusable="true"])').length > 0;
+        return DomHandler.getFocusableElements(this.overlayViewChild.overlayViewChild.nativeElement, ':not([data-p-hidden-focusable="true"]):not([class="p-dropdown-items-wrapper"])').length > 0;
     }
 
     onBackspaceKey(event: KeyboardEvent, pressedInInputText = false) {

src/app/components/keyfilter/keyfilter.ts

@@ -225,7 +225,11 @@ export class KeyFilter implements Validator {
         if (!browser.mozilla && (this.isSpecialKey(e) || !cc)) {
             return;
         }
-        let val = this.el.nativeElement.value + cc;
+
+        let valueCheck = this.el.nativeElement.value || '';
+
+        let val = valueCheck + cc;
+
         ok = (<RegExp>this.regex).test(val);
 
         if (!ok) {

src/app/components/listbox/listbox.ts

@@ -671,7 +671,11 @@ export class Listbox implements AfterContentInit, OnInit, ControlValueAccessor,
 
     visibleOptions = computed(() => {
         const options = this.group ? this.flatOptions(this._options()) : this._options() || [];
-        return this._filterValue() ? this.filterService.filter(options, this.searchFields, this._filterValue(), this.filterMatchMode, this.filterLocale) : options;
+        const filterValue = this._filterValue();
+
+        if (this.searchFields[0] === undefined) {
+            return filterValue ? options.filter((option) => option.toString().toLocaleLowerCase(this.filterLocale).indexOf(filterValue.toLocaleLowerCase(this.filterLocale).trim()) !== -1) : options;
+        } else return filterValue ? this.filterService.filter(options, this.searchFields, filterValue, this.filterMatchMode, this.filterLocale) : options;
     });
 
     constructor(

src/app/components/overlay/overlay.ts

@@ -514,13 +514,18 @@ export class Overlay implements AfterContentInit, OnDestroy {
 
         switch (event.toState) {
             case 'visible':
-                this.show(container, true);
+                if (this.visible) {
+                    this.show(container, true);
+                }
                 this.bindListeners();
 
                 break;
 
             case 'void':
-                this.hide(container, true);
+                if (!this.visible) {
+                    this.hide(container, true);
+                }
+
                 this.unbindListeners();
 
                 DomHandler.appendOverlay(this.overlayEl, this.targetEl, this.appendTo);

src/app/components/picklist/picklist.ts

@@ -1328,7 +1328,7 @@ export class PickList implements AfterViewChecked, AfterContentInit {
         this.focused[listType === this.SOURCE_LIST ? 'sourceList' : 'targetList'] = true;
 
         const sourceIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : selectedFirstItem ? findIndex : -1;
-        const filteredIndex = this.findIndexInList(this.source[sourceIndex], this.visibleOptionsSource);
+        const filteredIndex = ObjectUtils.isNotEmpty(this.visibleOptionsSource) ? this.findIndexInList(this.source[sourceIndex], this.visibleOptionsSource) : sourceIndex;
 
         this.changeFocusedOptionIndex(filteredIndex, listType);
         this.onFocus.emit(event);

src/app/components/scroller/scroller.ts

@@ -608,6 +608,7 @@ export class Scroller implements OnInit, AfterContentInit, AfterViewChecked, OnD
                 this.setInitialState();
                 this.setContentEl(this.contentEl);
                 this.init();
+                this.calculateAutoSize();
 
                 this.defaultWidth = DomHandler.getWidth(this.elementViewChild?.nativeElement);
                 this.defaultHeight = DomHandler.getHeight(this.elementViewChild?.nativeElement);
@@ -1068,6 +1069,7 @@ export class Scroller implements OnInit, AfterContentInit, AfterViewChecked, OnD
                         this.defaultContentHeight = DomHandler.getHeight(this.contentEl);
 
                         this.init();
+                        this.calculateAutoSize();
                     });
             }
         }, this._resizeDelay);

src/app/components/table/table.ts

@@ -1576,9 +1576,9 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable
                 this.restoringSort = false;
             }
 
-            if (this.lazy) {
-                this.onLazyLoad.emit(this.createLazyLoadMetadata());
-            } else if (this.value) {
+            this.lazy && this.onLazyLoad.emit(this.createLazyLoadMetadata());
+
+            if (this.value) {
                 if (this.customSort) {
                     this.sortFunction.emit({
                         data: this.value,
@@ -1626,9 +1626,8 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable
         }
 
         if (this.multiSortMeta) {
-            if (this.lazy) {
-                this.onLazyLoad.emit(this.createLazyLoadMetadata());
-            } else if (this.value) {
+            this.lazy && this.onLazyLoad.emit(this.createLazyLoadMetadata());
+            if (this.value) {
                 if (this.customSort) {
                     this.sortFunction.emit({
                         data: this.value,

src/app/components/tabview/tabview.ts

@@ -498,6 +498,7 @@ export class TabView implements AfterContentInit, AfterViewChecked, OnDestroy, B
         this.tabChangesSubscription = (this.tabPanels as QueryList<TabPanel>).changes.subscribe((_) => {
             this.initTabs();
             this.refreshButtonState();
+            this.callResizeObserver();
         });
 
         (this.templates as QueryList<PrimeTemplate>).forEach((item) => {
@@ -513,14 +514,18 @@ export class TabView implements AfterContentInit, AfterViewChecked, OnDestroy, B
         });
     }
 
-    ngAfterViewInit() {
+    callResizeObserver() {
         if (isPlatformBrowser(this.platformId)) {
             if (this.autoHideButtons) {
                 this.bindResizeObserver();
             }
         }
     }
 
+    ngAfterViewInit() {
+        this.callResizeObserver();
+    }
+
     bindResizeObserver() {
         this.container = DomHandler.findSingle(this.el.nativeElement, '[data-pc-section="navcontent"]');
         this.list = DomHandler.findSingle(this.el.nativeElement, '[data-pc-section="nav"]');

src/app/components/toast/toast.ts

@@ -150,7 +150,10 @@ export class ToastItem implements AfterViewInit, OnDestroy {
 
     timeout: any;
 
-    constructor(private zone: NgZone, private config: PrimeNGConfig) {}
+    constructor(
+        private zone: NgZone,
+        private config: PrimeNGConfig
+    ) {}
 
     ngAfterViewInit() {
         this.initTimeout();
@@ -159,12 +162,15 @@ export class ToastItem implements AfterViewInit, OnDestroy {
     initTimeout() {
         if (!this.message?.sticky) {
             this.zone.runOutsideAngular(() => {
-                this.timeout = setTimeout(() => {
-                    this.onClose.emit({
-                        index: <number>this.index,
-                        message: <Message>this.message
-                    });
-                }, this.message?.life || this.life || 3000);
+                this.timeout = setTimeout(
+                    () => {
+                        this.onClose.emit({
+                            index: <number>this.index,
+                            message: <Message>this.message
+                        });
+                    },
+                    this.message?.life || this.life || 3000
+                );
             });
         }
     }
@@ -343,7 +349,13 @@ export class Toast implements OnInit, AfterContentInit, OnDestroy {
 
     _position: ToastPositionType = 'top-right';
 
-    constructor(@Inject(DOCUMENT) private document: Document, private renderer: Renderer2, public messageService: MessageService, private cd: ChangeDetectorRef, public config: PrimeNGConfig) {}
+    constructor(
+        @Inject(DOCUMENT) private document: Document,
+        private renderer: Renderer2,
+        public messageService: MessageService,
+        private cd: ChangeDetectorRef,
+        public config: PrimeNGConfig
+    ) {}
 
     styleElement: any;
 

src/app/components/tree/tree.ts

@@ -1373,15 +1373,19 @@ export class Tree implements OnInit, AfterContentInit, OnChanges, OnDestroy, Blo
                             this.onNodeUnselect.emit({ originalEvent: event, node: node });
                         } else {
                             this.selection = node;
-                            this.onNodeSelect.emit({ originalEvent: event, node: node });
+                            setTimeout(() => {
+                                this.onNodeSelect.emit({ originalEvent: event, node: node });
+                            });
                         }
                     } else {
                         if (selected) {
                             this.selection = this.selection.filter((val: TreeNode, i: number) => i != index);
                             this.onNodeUnselect.emit({ originalEvent: event, node: node });
                         } else {
                             this.selection = [...(this.selection || []), node];
-                            this.onNodeSelect.emit({ originalEvent: event, node: node });
+                            setTimeout(() => {
+                                this.onNodeSelect.emit({ originalEvent: event, node: node });   
+                            });
                         }
                     }
 

src/app/showcase/doc/accordion/controlleddoc.ts

@@ -9,9 +9,9 @@ import { Code } from '@domain/code';
         </app-docsectiontext>
         <div class="card">
             <div class="flex mb-3 gap-2 justify-content-end">
-                <p-button (click)="activeIndex = 0" rounded="true" label="1" styleClass="w-2rem h-2rem p-0" [outlined]="activeIndex !== 0" />
-                <p-button (click)="activeIndex = 1" rounded="true" label="2" styleClass="w-2rem h-2rem p-0" [outlined]="activeIndex !== 1" />
-                <p-button (click)="activeIndex = 2" rounded="true" label="3" styleClass="w-2rem h-2rem p-0" [outlined]="activeIndex !== 2" />
+                <p-button (onClick)="activeIndex = 0" rounded="true" label="1" styleClass="w-2rem h-2rem p-0" [outlined]="activeIndex !== 0" />
+                <p-button (onClick)="activeIndex = 1" rounded="true" label="2" styleClass="w-2rem h-2rem p-0" [outlined]="activeIndex !== 1" />
+                <p-button (onClick)="activeIndex = 2" rounded="true" label="3" styleClass="w-2rem h-2rem p-0" [outlined]="activeIndex !== 2" />
             </div>
             <p-accordion (activeIndexChange)="activeIndexChange($event)" [activeIndex]="activeIndex">
                 <p-accordionTab header="Header I">

src/app/showcase/doc/blockui/basicdoc.ts

@@ -8,8 +8,8 @@ import { Code } from '@domain/code';
             <p>The element to block should be placed as a child of BlockUI and <i>blocked</i> property is required to control the state.</p>
         </app-docsectiontext>
         <div class="card">
-            <p-button pRipple label="Block" (click)="blockedPanel = true" />
-            <p-button pRipple label="Unblock" (click)="blockedPanel = false" />
+            <p-button pRipple label="Block" (onClick)="blockedPanel = true" />
+            <p-button pRipple label="Unblock" (onClick)="blockedPanel = false" />
             <p-blockUI [target]="pnl" [blocked]="blockedPanel">
                 <i class="pi pi-lock" style="font-size: 3rem"></i>
             </p-blockUI>
@@ -27,8 +27,8 @@ export class BasicDoc {
     blockedPanel: boolean = false;
 
     code: Code = {
-        basic: `<p-button pRipple label="Block" (click)="blockedPanel = true" />
-<p-button pRipple label="Unblock" (click)="blockedPanel = false" />
+        basic: `<p-button pRipple label="Block" (onClick)="blockedPanel = true" />
+<p-button pRipple label="Unblock" (onClick)="blockedPanel = false" />
 <p-blockUI [target]="pnl" [blocked]="blockedPanel">
     <i class="pi pi-lock" style="font-size: 3rem"></i>
 </p-blockUI>
@@ -38,8 +38,8 @@ export class BasicDoc {
     </p>
 </p-panel>`,
         html: `<div class="card">
-    <p-button pRipple label="Block" (click)="blockedPanel = true" />
-    <p-button pRipple label="Unblock" (click)="blockedPanel = false" />
+    <p-button pRipple label="Block" (onClick)="blockedPanel = true" />
+    <p-button pRipple label="Unblock" (onClick)="blockedPanel = false" />
     <p-blockUI [target]="pnl" [blocked]="blockedPanel">
         <i class="pi pi-lock" style="font-size: 3rem"></i>
     </p-blockUI>

src/app/showcase/doc/blockui/documentdoc.ts

@@ -9,7 +9,7 @@ import { Code } from '@domain/code';
         </app-docsectiontext>
         <div class="card">
             <p-blockUI [blocked]="blockedDocument" />
-            <p-button pRipple label="Block" (click)="blockDocument()" />
+            <p-button pRipple label="Block" (onClick)="blockDocument()" />
         </div>
         <app-code [code]="code" selector="block-ui-document-demo"></app-code>
     `
@@ -31,7 +31,7 @@ export class DocumentDoc {
         basic: `<p-blockUI [blocked]="blockedDocument" />`,
         html: `<div class="card">
     <p-blockUI [blocked]="blockedDocument" />
-    <p-button pRipple label="Block" (click)="blockDocument()" />
+    <p-button pRipple label="Block" (onClick)="blockDocument()" />
 </div>`,
         typescript: `import { Component, ChangeDetectorRef } from '@angular/core';
 import { BlockUIModule } from 'primeng/blockui';