From b786be6386b0fedc337d2eb0690f7a338aafa2e0 Mon Sep 17 00:00:00 2001
From: Austin Walker <bgbrwr@gmail.com>
Date: Thu, 11 Apr 2024 14:03:19 -0600
Subject: [PATCH 1/2] fixes #14010 - added autofocus to all inputs and buttons

---
 src/app/components/autofocus/autofocus.ts     |   9 +-
 src/app/components/button/button.ts           |  10 +-
 src/app/components/calendar/calendar.ts       |  10 +-
 .../components/cascadeselect/cascadeselect.ts |  12 +-
 src/app/components/checkbox/checkbox.ts       |  10 +-
 src/app/components/chips/chips.ts             |  10 +-
 src/app/components/colorpicker/colorpicker.ts |  10 +-
 src/app/components/dialog/dialog.ts           |  30 +---
 src/app/components/dom/domhandler.ts          |  36 ++--
 src/app/components/dropdown/dropdown.ts       |   3 +
 src/app/components/inputmask/inputmask.ts     |  13 +-
 src/app/components/inputnumber/inputnumber.ts |  10 +-
 src/app/components/inputotp/inputotp.ts       |  19 +-
 src/app/components/inputswitch/inputswitch.ts |  10 +-
 src/app/components/multiselect/multiselect.ts |  10 +-
 src/app/components/password/password.ts       |  11 +-
 src/app/components/radiobutton/radiobutton.ts |  11 +-
 src/app/components/rating/rating.ts           |  12 +-
 .../components/selectbutton/selectbutton.ts   |  10 +-
 src/app/components/slider/slider.ts           |  12 +-
 src/app/components/splitbutton/splitbutton.ts |  13 +-
 .../components/togglebutton/togglebutton.ts   |  10 +-
 src/app/components/treeselect/treeselect.ts   |  10 +-
 .../tristatecheckbox/tristatecheckbox.ts      |  10 +-
 src/app/showcase/doc/apidoc/index.json        | 165 +++++++++++++++++-
 src/app/showcase/doc/calendar/propsdoc.ts     |   6 +
 26 files changed, 407 insertions(+), 65 deletions(-)

diff --git a/src/app/components/autofocus/autofocus.ts b/src/app/components/autofocus/autofocus.ts
index 250b592f6e1..11253f8051b 100644
--- a/src/app/components/autofocus/autofocus.ts
+++ b/src/app/components/autofocus/autofocus.ts
@@ -17,11 +17,18 @@ export class AutoFocus {
      * When present, it specifies that the component should automatically get focus on load.
      * @group Props
      */
-    @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;
+    @Input({ transform: booleanAttribute }) autofocus: boolean = false;
 
     focused: boolean = false;
 
     ngAfterContentChecked() {
+        // This sets the `attr.autofocus` which is different than the Input `autofocus` attribute.
+        if (this.autofocus === false) {
+            this.host.nativeElement.removeAttribute('autofocus');
+        } else {
+            this.host.nativeElement.setAttribute('autofocus', true);
+        }
+
         if (!this.focused) {
             if (this.autofocus) {
                 setTimeout(() => {
diff --git a/src/app/components/button/button.ts b/src/app/components/button/button.ts
index 4e95dcce8d3..cd02156c196 100755
--- a/src/app/components/button/button.ts
+++ b/src/app/components/button/button.ts
@@ -24,6 +24,7 @@ import { DomHandler } from 'primeng/dom';
 import { SpinnerIcon } from 'primeng/icons/spinner';
 import { RippleModule } from 'primeng/ripple';
 import { ObjectUtils } from 'primeng/utils';
+import { AutoFocusModule } from 'primeng/autofocus';
 
 type ButtonIconPosition = 'left' | 'right' | 'top' | 'bottom';
 
@@ -342,6 +343,8 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
             [attr.data-pc-name]="'button'"
             [attr.data-pc-section]="'root'"
             [attr.tabindex]="tabindex"
+            pAutoFocus
+            [autofocus]="autofocus"
         >
             <ng-content></ng-content>
             <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
@@ -477,6 +480,11 @@ export class Button implements AfterContentInit {
      * @group Props
      */
     @Input() ariaLabel: string | undefined;
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @group Props
+     */
+    @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;
     /**
      * Callback to execute when button is clicked.
      * This event is intended to be used with the <p-button> component. Using a regular <button> element, use (click).
@@ -577,7 +585,7 @@ export class Button implements AfterContentInit {
 }
 
 @NgModule({
-    imports: [CommonModule, RippleModule, SharedModule, SpinnerIcon],
+    imports: [CommonModule, RippleModule, SharedModule, AutoFocusModule, SpinnerIcon],
     exports: [ButtonDirective, Button, SharedModule],
     declarations: [ButtonDirective, Button]
 })
diff --git a/src/app/components/calendar/calendar.ts b/src/app/components/calendar/calendar.ts
index bdfdc3a93f7..1a7d7ccfd08 100644
--- a/src/app/components/calendar/calendar.ts
+++ b/src/app/components/calendar/calendar.ts
@@ -38,6 +38,7 @@ import { TimesIcon } from 'primeng/icons/times';
 import { CalendarIcon } from 'primeng/icons/calendar';
 import { Nullable, VoidListener } from 'primeng/ts-helpers';
 import { NavigationState, CalendarResponsiveOptions, CalendarTypeView, LocaleSettings, Month, CalendarMonthChangeEvent, CalendarYearChangeEvent } from './calendar.interface';
+import { AutoFocusModule } from 'primeng/autofocus';
 
 export const CALENDAR_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -94,6 +95,8 @@ export const CALENDAR_VALUE_ACCESSOR: any = {
                     [attr.inputmode]="touchUI ? 'off' : null"
                     [ngClass]="'p-inputtext p-component'"
                     autocomplete="off"
+                    pAutoFocus
+                    [autofocus]="autofocus"
                 />
                 <ng-container *ngIf="showClear && !disabled && value != null">
                     <TimesIcon *ngIf="!clearIconTemplate" [styleClass]="'p-calendar-clear-icon'" (click)="clear()" />
@@ -676,6 +679,11 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor {
      * @group Props
      */
     @Input() clearButtonStyleClass: string = 'p-button-text';
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @group Props
+     */
+    @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;
     /**
      * Whether to automatically manage layering.
      * @group Props
@@ -3530,7 +3538,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor {
 }
 
 @NgModule({
-    imports: [CommonModule, ButtonModule, SharedModule, RippleModule, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, TimesIcon, CalendarIcon],
+    imports: [CommonModule, ButtonModule, SharedModule, RippleModule, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, TimesIcon, CalendarIcon, AutoFocusModule],
     exports: [Calendar, ButtonModule, SharedModule],
     declarations: [Calendar]
 })
diff --git a/src/app/components/cascadeselect/cascadeselect.ts b/src/app/components/cascadeselect/cascadeselect.ts
index 381c0f1259b..6ee7b736e4a 100755
--- a/src/app/components/cascadeselect/cascadeselect.ts
+++ b/src/app/components/cascadeselect/cascadeselect.ts
@@ -29,6 +29,8 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { OverlayOptions, OverlayService, PrimeNGConfig, PrimeTemplate, SharedModule, TranslationKeys } from 'primeng/api';
 import { DomHandler } from 'primeng/dom';
 import { AngleRightIcon } from 'primeng/icons/angleright';
+import { AutoFocusModule } from 'primeng/autofocus';
+
 import { ChevronDownIcon } from 'primeng/icons/chevrondown';
 import { TimesIcon } from 'primeng/icons/times';
 import { Overlay, OverlayModule } from 'primeng/overlay';
@@ -252,6 +254,8 @@ export class CascadeSelectSub implements OnInit {
                 (focus)="onInputFocus($event)"
                 (blur)="onInputBlur($event)"
                 (keydown)="onInputKeyDown($event)"
+                pAutoFocus
+                [autofocus]="autofocus"
             />
         </div>
         <span [ngClass]="labelClass" [attr.data-pc-section]="'label'">
@@ -496,6 +500,11 @@ export class CascadeSelect implements OnInit, AfterContentInit {
      * @group Props
      */
     @Input() overlayOptions: OverlayOptions | undefined;
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @group Props
+     */
+    @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;
     /**
      * Transition options of the show animation.
      * @group Props
@@ -636,7 +645,6 @@ export class CascadeSelect implements OnInit, AfterContentInit {
     get labelClass() {
         return {
             'p-cascadeselect-label': true,
-            'p-inputtext': true,
             'p-placeholder': this.label() === this.placeholder,
             'p-cascadeselect-label-empty': !this.value && (this.label() === 'p-emptylabel' || this.label().length === 0)
         };
@@ -1335,7 +1343,7 @@ export class CascadeSelect implements OnInit, AfterContentInit {
 }
 
 @NgModule({
-    imports: [CommonModule, OverlayModule, SharedModule, RippleModule, ChevronDownIcon, AngleRightIcon, TimesIcon],
+    imports: [CommonModule, OverlayModule, SharedModule, RippleModule, AutoFocusModule, ChevronDownIcon, AngleRightIcon, TimesIcon],
     exports: [CascadeSelect, OverlayModule, CascadeSelectSub, SharedModule],
     declarations: [CascadeSelect, CascadeSelectSub]
 })
diff --git a/src/app/components/checkbox/checkbox.ts b/src/app/components/checkbox/checkbox.ts
index 10ab60c8b24..3c451482fa1 100755
--- a/src/app/components/checkbox/checkbox.ts
+++ b/src/app/components/checkbox/checkbox.ts
@@ -19,6 +19,7 @@ import {
 } from '@angular/core';
 import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { PrimeTemplate, SharedModule } from 'primeng/api';
+import { AutoFocusModule } from 'primeng/autofocus';
 import { CheckIcon } from 'primeng/icons/check';
 import { Nullable } from 'primeng/ts-helpers';
 import { ObjectUtils } from 'primeng/utils';
@@ -62,6 +63,8 @@ export const CHECKBOX_VALUE_ACCESSOR: any = {
                     (focus)="onInputFocus($event)"
                     (blur)="onInputBlur($event)"
                     [attr.data-pc-section]="'hiddenInput'"
+                    pAutoFocus
+                    [autofocus]="autofocus"
                 />
             </div>
             <div
@@ -184,6 +187,11 @@ export class Checkbox implements ControlValueAccessor {
      * @group Props
      */
     @Input({ transform: booleanAttribute }) required: boolean | undefined;
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @group Props
+     */
+    @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;
     /**
      * Value in checked state.
      * @group Props
@@ -322,7 +330,7 @@ export class Checkbox implements ControlValueAccessor {
 }
 
 @NgModule({
-    imports: [CommonModule, CheckIcon],
+    imports: [CommonModule, AutoFocusModule, CheckIcon],
     exports: [Checkbox, SharedModule],
     declarations: [Checkbox]
 })
diff --git a/src/app/components/chips/chips.ts b/src/app/components/chips/chips.ts
index 9c41c678940..05981974eae 100755
--- a/src/app/components/chips/chips.ts
+++ b/src/app/components/chips/chips.ts
@@ -21,6 +21,7 @@ import {
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { PrimeTemplate, SharedModule } from 'primeng/api';
+import { AutoFocusModule } from 'primeng/autofocus';
 import { TimesIcon } from 'primeng/icons/times';
 import { TimesCircleIcon } from 'primeng/icons/timescircle';
 import { InputTextModule } from 'primeng/inputtext';
@@ -107,6 +108,8 @@ export const CHIPS_VALUE_ACCESSOR: any = {
                         [disabled]="disabled || isMaxedOut"
                         [ngStyle]="inputStyle"
                         [class]="inputStyleClass"
+                        pAutoFocus
+                        [autofocus]="autofocus"
                     />
                 </li>
                 <li *ngIf="value != null && filled && !disabled && showClear">
@@ -225,6 +228,11 @@ export class Chips implements AfterContentInit, ControlValueAccessor {
      * @group Props
      */
     @Input({ transform: booleanAttribute }) showClear: boolean = false;
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @group Props
+     */
+    @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;
     /**
      * Callback to invoke on chip add.
      * @param {ChipsAddEvent} event - Custom chip add event.
@@ -592,7 +600,7 @@ export class Chips implements AfterContentInit, ControlValueAccessor {
 }
 
 @NgModule({
-    imports: [CommonModule, InputTextModule, SharedModule, TimesCircleIcon, TimesIcon],
+    imports: [CommonModule, InputTextModule, SharedModule, AutoFocusModule, TimesCircleIcon, TimesIcon],
     exports: [Chips, InputTextModule, SharedModule],
     declarations: [Chips]
 })
diff --git a/src/app/components/colorpicker/colorpicker.ts b/src/app/components/colorpicker/colorpicker.ts
index 081699e1401..34182d15364 100755
--- a/src/app/components/colorpicker/colorpicker.ts
+++ b/src/app/components/colorpicker/colorpicker.ts
@@ -23,6 +23,7 @@ import {
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { OverlayService, PrimeNGConfig, TranslationKeys } from 'primeng/api';
 import { ConnectedOverlayScrollHandler, DomHandler } from 'primeng/dom';
+import { AutoFocusModule } from 'primeng/autofocus';
 import { Nullable, VoidListener } from 'primeng/ts-helpers';
 import { ZIndexUtils } from 'primeng/utils';
 import { ColorPickerChangeEvent } from './colorpicker.interface';
@@ -63,6 +64,8 @@ export const COLORPICKER_VALUE_ACCESSOR: any = {
                 [style.backgroundColor]="inputBgColor"
                 [attr.data-pc-section]="'input'"
                 [attr.aria-label]="ariaLabel"
+                pAutoFocus
+                [autofocus]="autofocus"
             />
             <div
                 *ngIf="inline || overlayVisible"
@@ -157,6 +160,11 @@ export class ColorPicker implements ControlValueAccessor, OnDestroy {
      * @group Props
      */
     @Input() hideTransitionOptions: string = '.1s linear';
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @group Props
+     */
+    @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;
     /**
      * Callback to invoke on value change.
      * @param {ColorPickerChangeEvent} event - Custom value change event.
@@ -809,7 +817,7 @@ export class ColorPicker implements ControlValueAccessor, OnDestroy {
 }
 
 @NgModule({
-    imports: [CommonModule],
+    imports: [CommonModule, AutoFocusModule],
     exports: [ColorPicker],
     declarations: [ColorPicker]
 })
diff --git a/src/app/components/dialog/dialog.ts b/src/app/components/dialog/dialog.ts
index 530060a0c6b..52e76f30c0a 100755
--- a/src/app/components/dialog/dialog.ts
+++ b/src/app/components/dialog/dialog.ts
@@ -600,7 +600,7 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy {
     }
 
     focus() {
-        let focusable = DomHandler.findSingle(this.container, '[autofocus]');
+        let focusable = DomHandler.getFocusableElement(this.container, '[autofocus]');
         if (focusable) {
             this.zone.runOutsideAngular(() => {
                 setTimeout(() => focusable.focus(), 5);
@@ -711,32 +711,6 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy {
         }
     }
 
-    onKeydown(event: KeyboardEvent) {
-        if (this.focusTrap) {
-            if (event.which === 9) {
-                event.preventDefault();
-
-                let focusableElements = DomHandler.getFocusableElements(this.container as HTMLDivElement);
-
-                if (focusableElements && focusableElements.length > 0) {
-                    if (!focusableElements[0].ownerDocument.activeElement) {
-                        focusableElements[0].focus();
-                    } else {
-                        let focusedIndex = focusableElements.indexOf(focusableElements[0].ownerDocument.activeElement);
-
-                        if (event.shiftKey) {
-                            if (focusedIndex == -1 || focusedIndex === 0) focusableElements[focusableElements.length - 1].focus();
-                            else focusableElements[focusedIndex - 1].focus();
-                        } else {
-                            if (focusedIndex == -1 || focusedIndex === focusableElements.length - 1) focusableElements[0].focus();
-                            else focusableElements[focusedIndex + 1].focus();
-                        }
-                    }
-                }
-            }
-        }
-    }
-
     onDrag(event: MouseEvent) {
         if (this.dragging) {
             const containerWidth = DomHandler.getOuterWidth(this.container);
@@ -929,7 +903,7 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy {
         const documentTarget: any = this.el ? this.el.nativeElement.ownerDocument : 'document';
 
         this.documentEscapeListener = this.renderer.listen(documentTarget, 'keydown', (event) => {
-            if (event.which == 27) {
+            if (event.key == 'Escape') {
                 this.close(event);
             }
         });
diff --git a/src/app/components/dom/domhandler.ts b/src/app/components/dom/domhandler.ts
index bde26767804..9a610179d3f 100755
--- a/src/app/components/dom/domhandler.ts
+++ b/src/app/components/dom/domhandler.ts
@@ -615,17 +615,20 @@ export class DomHandler {
         element && document.activeElement !== element && element.focus(options);
     }
 
-    public static getFocusableElements(element, selector = '') {
-        let focusableElements = this.find(
-            element,
-            `button:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
-                [href][clientHeight][clientWidth]:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
-                input:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
-                select:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
-                textarea:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
-                [tabIndex]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
-                [contenteditable]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector}`
-        );
+    public static getFocusableSelectorString(selector = ''): string {
+        return `button:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+        [href][clientHeight][clientWidth]:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+        input:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+        select:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+        textarea:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+        [tabIndex]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+        [contenteditable]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+        .p-inputtext:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+        .p-button:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector}`;
+    }
+
+    public static getFocusableElements(element, selector = ''): any[] {
+        let focusableElements = this.find(element, this.getFocusableSelectorString(selector));
 
         let visibleFocusableElements = [];
 
@@ -637,6 +640,17 @@ export class DomHandler {
         return visibleFocusableElements;
     }
 
+    public static getFocusableElement(element, selector = ''): any | null {
+        let focusableElement = this.findSingle(element, this.getFocusableSelectorString(selector));
+
+        if (focusableElement) {
+            const computedStyle = getComputedStyle(focusableElement);
+            if (this.isVisible(focusableElement) && computedStyle.display != 'none' && computedStyle.visibility != 'hidden') return focusableElement;
+        }
+
+        return null;
+    }
+
     public static getFirstFocusableElement(element, selector) {
         const focusableElements = this.getFocusableElements(element, selector);
 
diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts
index 58c7842f84b..8b6d7fcdc55 100755
--- a/src/app/components/dropdown/dropdown.ts
+++ b/src/app/components/dropdown/dropdown.ts
@@ -169,6 +169,9 @@ export class DropdownItem {
                 [attr.aria-label]="ariaLabel || (label() === 'p-emptylabel' ? undefined : label())"
                 (input)="onEditableInput($event)"
                 (keydown)="onKeyDown($event)"
+                pAutoFocus
+                [autofocus]="autofocus"
+                [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
                 (focus)="onInputFocus($event)"
                 (blur)="onInputBlur($event)"
             />
diff --git a/src/app/components/inputmask/inputmask.ts b/src/app/components/inputmask/inputmask.ts
index bde26504aac..986f355c480 100755
--- a/src/app/components/inputmask/inputmask.ts
+++ b/src/app/components/inputmask/inputmask.ts
@@ -94,7 +94,7 @@ export const INPUTMASK_VALUE_ACCESSOR: any = {
             (keydown)="onInputKeydown($event)"
             (keypress)="onKeyPress($event)"
             pAutoFocus
-            [autofocus]="autoFocus"
+            [autofocus]="autofocus"
             (input)="onInputChange($event)"
             (paste)="handleInputChange($event)"
             [attr.data-pc-name]="'inputmask'"
@@ -228,7 +228,16 @@ export class InputMask implements OnInit, ControlValueAccessor {
      * When present, the input gets a focus automatically on load.
      * @group Props
      */
-    @Input({ transform: booleanAttribute }) autoFocus: boolean | undefined;
+    @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;
+    /**
+     * When present, the input gets a focus automatically on load.
+     * @group Props
+     * @deprecated Use autofocus property instead.
+     */
+    @Input({ transform: booleanAttribute }) set autoFocus(value: boolean | undefined) {
+        this.autofocus = value;
+        console.warn('autoFocus is deprecated. Use autofocus property instead.');
+    }
     /**
      * Used to define a string that autocomplete attribute the current element.
      * @group Props
diff --git a/src/app/components/inputnumber/inputnumber.ts b/src/app/components/inputnumber/inputnumber.ts
index 158d5dc9b18..35e0daf0826 100644
--- a/src/app/components/inputnumber/inputnumber.ts
+++ b/src/app/components/inputnumber/inputnumber.ts
@@ -32,6 +32,7 @@ import { AngleUpIcon } from 'primeng/icons/angleup';
 import { TimesIcon } from 'primeng/icons/times';
 import { InputTextModule } from 'primeng/inputtext';
 import { Nullable } from 'primeng/ts-helpers';
+import { AutoFocusModule } from 'primeng/autofocus';
 import { InputNumberInputEvent } from './inputnumber.interface';
 
 export const INPUTNUMBER_VALUE_ACCESSOR: any = {
@@ -94,6 +95,8 @@ export const INPUTNUMBER_VALUE_ACCESSOR: any = {
                 (focus)="onInputFocus($event)"
                 (blur)="onInputBlur($event)"
                 [attr.data-pc-section]="'input'"
+                pAutoFocus
+                [autofocus]="autofocus"
             />
             <ng-container *ngIf="buttonLayout != 'vertical' && showClear && value">
                 <TimesIcon *ngIf="!clearIconTemplate" [ngClass]="'p-inputnumber-clear-icon'" (click)="clear()" [attr.data-pc-section]="'clearIcon'" />
@@ -402,6 +405,11 @@ export class InputNumber implements OnInit, AfterContentInit, OnChanges, Control
      * @group Props
      */
     @Input({ transform: booleanAttribute }) showClear: boolean = false;
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @group Props
+     */
+    @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;
     /**
      * When present, it specifies that the element should be disabled.
      * @group Props
@@ -1454,7 +1462,7 @@ export class InputNumber implements OnInit, AfterContentInit, OnChanges, Control
 }
 
 @NgModule({
-    imports: [CommonModule, InputTextModule, ButtonModule, TimesIcon, AngleUpIcon, AngleDownIcon],
+    imports: [CommonModule, InputTextModule, ButtonModule, AutoFocusModule, TimesIcon, AngleUpIcon, AngleDownIcon],
     exports: [InputNumber, SharedModule],
     declarations: [InputNumber]
 })
diff --git a/src/app/components/inputotp/inputotp.ts b/src/app/components/inputotp/inputotp.ts
index 2ac07e18bf9..40b0d7d508f 100644
--- a/src/app/components/inputotp/inputotp.ts
+++ b/src/app/components/inputotp/inputotp.ts
@@ -1,9 +1,10 @@
 import { CommonModule } from '@angular/common';
-import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, EventEmitter, Input, NgModule, Output, QueryList, TemplateRef, ViewEncapsulation, forwardRef } from '@angular/core';
+import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, EventEmitter, Input, NgModule, Output, QueryList, TemplateRef, ViewEncapsulation, booleanAttribute, forwardRef } from '@angular/core';
 import { PrimeTemplate, SharedModule } from 'primeng/api';
 import { InputTextModule } from 'primeng/inputtext';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Nullable } from 'primeng/ts-helpers';
+import { AutoFocusModule } from 'primeng/autofocus';
 import { InputOtpChangeEvent } from './inputotp.interface';
 
 export const INPUT_OTP_VALUE_ACCESSOR: any = {
@@ -39,6 +40,8 @@ export const INPUT_OTP_VALUE_ACCESSOR: any = {
                     (blur)="onInputBlur($event)"
                     (paste)="onPaste($event)"
                     (keydown)="onKeyDown($event)"
+                    pAutoFocus
+                    [autofocus]="getAutofocus(i)"
                 />
             </ng-container>
             <ng-container *ngIf="inputTemplate">
@@ -95,6 +98,11 @@ export class InputOtp implements AfterContentInit {
      * @group Props
      */
     @Input() integerOnly: boolean = false;
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @group Props
+     */
+    @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;
     /**
      * Callback to invoke on value change.
      * @group Emits
@@ -213,6 +221,13 @@ export class InputOtp implements AfterContentInit {
         return this.tokens[i - 1] || '';
     }
 
+    getAutofocus(i: number): boolean {
+        if (i === 1) {
+            return this.autofocus;
+        }
+        return false;
+    }
+
     registerOnChange(fn: Function): void {
         this.onModelChange = fn;
     }
@@ -326,7 +341,7 @@ export class InputOtp implements AfterContentInit {
 }
 
 @NgModule({
-    imports: [CommonModule, SharedModule, InputTextModule],
+    imports: [CommonModule, SharedModule, InputTextModule, AutoFocusModule],
     exports: [InputOtp, SharedModule],
     declarations: [InputOtp]
 })
diff --git a/src/app/components/inputswitch/inputswitch.ts b/src/app/components/inputswitch/inputswitch.ts
index 56c669fe1e3..f36fb5a93fb 100755
--- a/src/app/components/inputswitch/inputswitch.ts
+++ b/src/app/components/inputswitch/inputswitch.ts
@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, NgModule, Output, ViewChild, ViewEncapsulation, booleanAttribute, forwardRef, numberAttribute } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { AutoFocusModule } from 'primeng/autofocus';
 import { InputSwitchChangeEvent } from './inputswitch.interface';
 
 export const INPUTSWITCH_VALUE_ACCESSOR: any = {
@@ -39,6 +40,8 @@ export const INPUTSWITCH_VALUE_ACCESSOR: any = {
                     (focus)="onFocus()"
                     (blur)="onBlur()"
                     [attr.data-pc-section]="'hiddenInput'"
+                    pAutoFocus
+                    [autofocus]="autofocus"
                 />
             </div>
             <span class="p-inputswitch-slider" [attr.data-pc-section]="'slider'"></span>
@@ -108,6 +111,11 @@ export class InputSwitch {
      * @group Props
      */
     @Input() ariaLabelledBy: string | undefined;
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @group Props
+     */
+    @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;
     /**
      * Callback to invoke when the on value change.
      * @param {InputSwitchChangeEvent} event - Custom change event.
@@ -175,7 +183,7 @@ export class InputSwitch {
 }
 
 @NgModule({
-    imports: [CommonModule],
+    imports: [CommonModule, AutoFocusModule],
     exports: [InputSwitch],
     declarations: [InputSwitch]
 })
diff --git a/src/app/components/multiselect/multiselect.ts b/src/app/components/multiselect/multiselect.ts
index 02133ce436f..b942914b7f4 100755
--- a/src/app/components/multiselect/multiselect.ts
+++ b/src/app/components/multiselect/multiselect.ts
@@ -45,6 +45,7 @@ import { TimesCircleIcon } from 'primeng/icons/timescircle';
 import { TimesIcon } from 'primeng/icons/times';
 import { ChevronDownIcon } from 'primeng/icons/chevrondown';
 import { Nullable } from 'primeng/ts-helpers';
+import { AutoFocusModule } from 'primeng/autofocus';
 import { MultiSelectRemoveEvent, MultiSelectFilterOptions, MultiSelectFilterEvent, MultiSelectBlurEvent, MultiSelectChangeEvent, MultiSelectFocusEvent, MultiSelectLazyLoadEvent, MultiSelectSelectAllChangeEvent } from './multiselect.interface';
 
 export const MULTISELECT_VALUE_ACCESSOR: any = {
@@ -164,6 +165,8 @@ export class MultiSelectItem {
                     (focus)="onInputFocus($event)"
                     (blur)="onInputBlur($event)"
                     (keydown)="onKeyDown($event)"
+                    pAutoFocus
+                    [autofocus]="autofocus"
                 />
             </div>
             <div class="p-multiselect-label-container" [pTooltip]="tooltip" [tooltipPosition]="tooltipPosition" [positionStyle]="tooltipPositionStyle" [tooltipStyleClass]="tooltipStyleClass">
@@ -667,6 +670,11 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
      * @group Props
      */
     @Input({ transform: booleanAttribute }) showClear: boolean = false;
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @group Props
+     */
+    @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;
     /**
      * @deprecated since v14.2.0, use overlayOptions property instead.
      * Whether to automatically manage layering.
@@ -2148,7 +2156,7 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
 }
 
 @NgModule({
-    imports: [CommonModule, OverlayModule, SharedModule, TooltipModule, RippleModule, ScrollerModule, CheckIcon, SearchIcon, TimesCircleIcon, TimesIcon, ChevronDownIcon, CheckIcon],
+    imports: [CommonModule, OverlayModule, SharedModule, TooltipModule, RippleModule, ScrollerModule, AutoFocusModule, CheckIcon, SearchIcon, TimesCircleIcon, TimesIcon, ChevronDownIcon, CheckIcon],
     exports: [MultiSelect, OverlayModule, SharedModule, ScrollerModule],
     declarations: [MultiSelect, MultiSelectItem]
 })
diff --git a/src/app/components/password/password.ts b/src/app/components/password/password.ts
index 0caa70a92a7..d321ab9c285 100644
--- a/src/app/components/password/password.ts
+++ b/src/app/components/password/password.ts
@@ -39,6 +39,7 @@ import { TimesIcon } from 'primeng/icons/times';
 import { InputTextModule } from 'primeng/inputtext';
 import { Nullable, VoidListener } from 'primeng/ts-helpers';
 import { ZIndexUtils } from 'primeng/utils';
+import { AutoFocusModule } from 'primeng/autofocus';
 import { Subscription } from 'rxjs';
 
 type Meter = {
@@ -351,6 +352,8 @@ export const Password_VALUE_ACCESSOR: any = {
                 (keyup)="onKeyUp($event)"
                 [attr.maxlength]="maxLength"
                 [attr.data-pc-section]="'input'"
+                pAutoFocus
+                [autofocus]="autofocus"
             />
             <ng-container *ngIf="showClear && value != null">
                 <TimesIcon *ngIf="!clearIconTemplate" [styleClass]="'p-password-clear-icon'" (click)="clear()" [attr.data-pc-section]="'clearIcon'" />
@@ -532,6 +535,12 @@ export class Password implements AfterContentInit, OnInit {
      * @group Props
      */
     @Input({ transform: booleanAttribute }) showClear: boolean = false;
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @group Props
+     */
+    @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;
+
     /**
      * Callback to invoke when the component receives focus.
      * @param {Event} event - Browser event.
@@ -928,7 +937,7 @@ export class Password implements AfterContentInit, OnInit {
 }
 
 @NgModule({
-    imports: [CommonModule, InputTextModule, TimesIcon, EyeSlashIcon, EyeIcon],
+    imports: [CommonModule, InputTextModule, AutoFocusModule, TimesIcon, EyeSlashIcon, EyeIcon],
     exports: [PasswordDirective, Password, SharedModule],
     declarations: [PasswordDirective, Password, MapperPipe]
 })
diff --git a/src/app/components/radiobutton/radiobutton.ts b/src/app/components/radiobutton/radiobutton.ts
index 3b6852a1cbb..23a71518587 100755
--- a/src/app/components/radiobutton/radiobutton.ts
+++ b/src/app/components/radiobutton/radiobutton.ts
@@ -2,6 +2,8 @@ import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Injectable, Injector, Input, NgModule, OnDestroy, OnInit, Output, ViewChild, booleanAttribute, forwardRef, numberAttribute } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { Nullable } from 'primeng/ts-helpers';
+import { AutoFocusModule } from 'primeng/autofocus';
+
 import { RadioButtonClickEvent } from './radiobutton.interface';
 
 export const RADIO_VALUE_ACCESSOR: any = {
@@ -73,6 +75,8 @@ export class RadioControlRegistry {
                     (focus)="onInputFocus($event)"
                     (blur)="onInputBlur($event)"
                     [attr.data-pc-section]="'hiddenInput'"
+                    pAutoFocus
+                    [autofocus]="autofocus"
                 />
             </div>
             <div [ngClass]="{ 'p-radiobutton-box': true, 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }" [attr.data-pc-section]="'input'">
@@ -156,6 +160,11 @@ export class RadioButton implements ControlValueAccessor, OnInit, OnDestroy {
      * @group Props
      */
     @Input() labelStyleClass: string | undefined;
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @group Props
+     */
+    @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;
     /**
      * Callback to invoke on radio button click.
      * @param {RadioButtonClickEvent} event - Custom click event.
@@ -283,7 +292,7 @@ export class RadioButton implements ControlValueAccessor, OnInit, OnDestroy {
 }
 
 @NgModule({
-    imports: [CommonModule],
+    imports: [CommonModule, AutoFocusModule],
     exports: [RadioButton],
     declarations: [RadioButton]
 })
diff --git a/src/app/components/rating/rating.ts b/src/app/components/rating/rating.ts
index 7e31ce86305..08f40a81142 100755
--- a/src/app/components/rating/rating.ts
+++ b/src/app/components/rating/rating.ts
@@ -9,6 +9,7 @@ import { Nullable } from 'primeng/ts-helpers';
 import { RatingRateEvent } from './rating.interface';
 import { DomHandler } from 'primeng/dom';
 import { UniqueComponentId } from 'primeng/utils';
+import { AutoFocusModule } from 'primeng/autofocus';
 
 export const RATING_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -37,6 +38,8 @@ export const RATING_VALUE_ACCESSOR: any = {
                             (focus)="onInputFocus($event, 0)"
                             (blur)="onInputBlur($event)"
                             (change)="onChange($event, 0)"
+                            pAutoFocus
+                            [autofocus]="autofocus"
                         />
                     </span>
                     <span *ngIf="iconCancelClass" class="p-rating-icon p-rating-cancel" [ngClass]="iconCancelClass" [ngStyle]="iconCancelStyle"></span>
@@ -56,6 +59,8 @@ export const RATING_VALUE_ACCESSOR: any = {
                                 (focus)="onInputFocus($event, star + 1)"
                                 (blur)="onInputBlur($event)"
                                 (change)="onChange($event, star + 1)"
+                                pAutoFocus
+                                [autofocus]="autofocus"
                             />
                         </span>
                         <ng-container *ngIf="!value || i >= value">
@@ -138,6 +143,11 @@ export class Rating implements OnInit, ControlValueAccessor {
      * @group Props
      */
     @Input() iconCancelStyle: { [klass: string]: any } | null | undefined;
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @group Props
+     */
+    @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;
     /**
      * Emitted on value change.
      * @param {RatingRateEvent} value - Custom rate event.
@@ -294,7 +304,7 @@ export class Rating implements OnInit, ControlValueAccessor {
 }
 
 @NgModule({
-    imports: [CommonModule, StarFillIcon, StarIcon, BanIcon],
+    imports: [CommonModule, AutoFocusModule, StarFillIcon, StarIcon, BanIcon],
     exports: [Rating, SharedModule],
     declarations: [Rating]
 })
diff --git a/src/app/components/selectbutton/selectbutton.ts b/src/app/components/selectbutton/selectbutton.ts
index 719622e29bb..1b966bbcbda 100755
--- a/src/app/components/selectbutton/selectbutton.ts
+++ b/src/app/components/selectbutton/selectbutton.ts
@@ -5,6 +5,7 @@ import { PrimeTemplate, SharedModule } from 'primeng/api';
 import { RippleModule } from 'primeng/ripple';
 import { Nullable } from 'primeng/ts-helpers';
 import { ObjectUtils } from 'primeng/utils';
+import { AutoFocusModule } from 'primeng/autofocus';
 import { SelectButtonChangeEvent, SelectButtonOptionClickEvent } from './selectbutton.interface';
 
 export const SELECTBUTTON_VALUE_ACCESSOR: any = {
@@ -39,6 +40,8 @@ export const SELECTBUTTON_VALUE_ACCESSOR: any = {
                 (blur)="onBlur()"
                 [attr.aria-labelledby]="this.getOptionLabel(option)"
                 [attr.data-pc-section]="'button'"
+                pAutoFocus
+                [autofocus]="autofocus"
             >
                 <ng-container *ngIf="!itemTemplate; else customcontent">
                     <span [ngClass]="'p-button-icon p-button-icon-left'" [class]="option.icon" *ngIf="option.icon" [attr.data-pc-section]="'icon'"></span>
@@ -124,6 +127,11 @@ export class SelectButton implements ControlValueAccessor {
      * @group Props
      */
     @Input() dataKey: string | undefined;
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @group Props
+     */
+    @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;
     /**
      * Callback to invoke on input click.
      * @param {SelectButtonOptionClickEvent} event - Custom click event.
@@ -312,7 +320,7 @@ export class SelectButton implements ControlValueAccessor {
 }
 
 @NgModule({
-    imports: [CommonModule, RippleModule, SharedModule],
+    imports: [CommonModule, RippleModule, SharedModule, AutoFocusModule],
     exports: [SelectButton, SharedModule],
     declarations: [SelectButton]
 })
diff --git a/src/app/components/slider/slider.ts b/src/app/components/slider/slider.ts
index 76baa4a47a4..67d1ceec20a 100755
--- a/src/app/components/slider/slider.ts
+++ b/src/app/components/slider/slider.ts
@@ -22,6 +22,7 @@ import {
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DomHandler } from 'primeng/dom';
 import { Nullable, VoidListener } from 'primeng/ts-helpers';
+import { AutoFocusModule } from 'primeng/autofocus';
 import { SliderChangeEvent, SliderSlideEndEvent } from './slider.interface';
 
 export const SLIDER_VALUE_ACCESSOR: any = {
@@ -78,6 +79,8 @@ export const SLIDER_VALUE_ACCESSOR: any = {
                 [attr.aria-label]="ariaLabel"
                 [attr.aria-orientation]="orientation"
                 [attr.data-pc-section]="'handle'"
+                pAutoFocus
+                [autofocus]="autofocus"
             ></span>
             <span
                 *ngIf="range"
@@ -100,6 +103,8 @@ export const SLIDER_VALUE_ACCESSOR: any = {
                 [attr.aria-label]="ariaLabel"
                 [attr.aria-orientation]="orientation"
                 [attr.data-pc-section]="'startHandler'"
+                pAutoFocus
+                [autofocus]="autofocus"
             ></span>
             <span
                 *ngIf="range"
@@ -193,6 +198,11 @@ export class Slider implements OnDestroy, ControlValueAccessor {
      * @group Props
      */
     @Input({ transform: numberAttribute }) tabindex: number = 0;
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @group Props
+     */
+    @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;
     /**
      * Callback to invoke on value change.
      * @param {SliderChangeEvent} event - Custom value change event.
@@ -693,7 +703,7 @@ export class Slider implements OnDestroy, ControlValueAccessor {
 }
 
 @NgModule({
-    imports: [CommonModule],
+    imports: [CommonModule, AutoFocusModule],
     exports: [Slider],
     declarations: [Slider]
 })
diff --git a/src/app/components/splitbutton/splitbutton.ts b/src/app/components/splitbutton/splitbutton.ts
index ba1ec2e7b92..29e946a2b60 100755
--- a/src/app/components/splitbutton/splitbutton.ts
+++ b/src/app/components/splitbutton/splitbutton.ts
@@ -5,6 +5,8 @@ import { ButtonModule } from 'primeng/button';
 import { ChevronDownIcon } from 'primeng/icons/chevrondown';
 import { TieredMenu, TieredMenuModule } from 'primeng/tieredmenu';
 import { UniqueComponentId } from 'primeng/utils';
+import { AutoFocusModule } from 'primeng/autofocus';
+
 import { ButtonProps, MenuButtonProps } from './splitbutton.interface';
 
 type SplitButtonIconPosition = 'left' | 'right';
@@ -31,6 +33,8 @@ type SplitButtonIconPosition = 'left' | 'right';
                     [disabled]="disabled"
                     [attr.tabindex]="tabindex"
                     [attr.aria-label]="buttonProps?.['aria-label'] || label"
+                    pAutoFocus
+                    [autofocus]="autofocus"
                 >
                     <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
                 </button>
@@ -52,6 +56,8 @@ type SplitButtonIconPosition = 'left' | 'right';
                     [disabled]="buttonDisabled"
                     [attr.tabindex]="tabindex"
                     [attr.aria-label]="buttonProps?.['aria-label']"
+                    pAutoFocus
+                    [autofocus]="autofocus"
                 ></button>
             </ng-template>
             <button
@@ -207,6 +213,11 @@ export class SplitButton {
      * Menu Button Props
      */
     @Input() menuButtonProps: MenuButtonProps | undefined;
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @group Props
+     */
+    @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;
     /**
      * Callback to invoke when default command button is clicked.
      * @param {MouseEvent} event - Mouse event.
@@ -332,7 +343,7 @@ export class SplitButton {
 }
 
 @NgModule({
-    imports: [CommonModule, ButtonModule, TieredMenuModule, ChevronDownIcon],
+    imports: [CommonModule, ButtonModule, TieredMenuModule, AutoFocusModule, ChevronDownIcon],
     exports: [SplitButton, ButtonModule, TieredMenuModule],
     declarations: [SplitButton]
 })
diff --git a/src/app/components/togglebutton/togglebutton.ts b/src/app/components/togglebutton/togglebutton.ts
index 29147629a0f..131519f3faa 100755
--- a/src/app/components/togglebutton/togglebutton.ts
+++ b/src/app/components/togglebutton/togglebutton.ts
@@ -5,6 +5,7 @@ import { RippleModule } from 'primeng/ripple';
 import { ToggleButtonChangeEvent } from './togglebutton.interface';
 import { Nullable } from 'primeng/ts-helpers';
 import { PrimeTemplate, SharedModule } from 'primeng/api';
+import { AutoFocusModule } from 'primeng/autofocus';
 
 type ToggleButtonIconPosition = 'left' | 'right';
 
@@ -34,6 +35,8 @@ export const TOGGLEBUTTON_VALUE_ACCESSOR: any = {
             pRipple
             [attr.data-pc-name]="'togglebutton'"
             [attr.data-pc-section]="'root'"
+            pAutoFocus
+            [autofocus]="autofocus"
         >
             @if(!iconTemplate) {
             <span
@@ -116,6 +119,11 @@ export class ToggleButton implements ControlValueAccessor {
      * @group Props
      */
     @Input() iconPos: 'left' | 'right' = 'left';
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @group Props
+     */
+    @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;
     /**
      * Callback to invoke on value change.
      * @param {ToggleButtonChangeEvent} event - Custom change event.
@@ -207,7 +215,7 @@ export class ToggleButton implements ControlValueAccessor {
 }
 
 @NgModule({
-    imports: [CommonModule, RippleModule, SharedModule],
+    imports: [CommonModule, RippleModule, SharedModule, AutoFocusModule],
     exports: [ToggleButton, SharedModule],
     declarations: [ToggleButton]
 })
diff --git a/src/app/components/treeselect/treeselect.ts b/src/app/components/treeselect/treeselect.ts
index 4252d306241..dd093013bd2 100755
--- a/src/app/components/treeselect/treeselect.ts
+++ b/src/app/components/treeselect/treeselect.ts
@@ -29,6 +29,7 @@ import { RippleModule } from 'primeng/ripple';
 import { Tree, TreeModule, TreeNodeSelectEvent, TreeNodeUnSelectEvent } from 'primeng/tree';
 import { ObjectUtils, UniqueComponentId } from 'primeng/utils';
 import { Nullable } from 'primeng/ts-helpers';
+import { AutoFocusModule } from 'primeng/autofocus';
 import { TreeSelectNodeCollapseEvent, TreeSelectNodeExpandEvent } from './treeselect.interface';
 
 export const TREESELECT_VALUE_ACCESSOR: any = {
@@ -61,6 +62,8 @@ export const TREESELECT_VALUE_ACCESSOR: any = {
                     [attr.aria-expanded]="overlayVisible ?? false"
                     [attr.aria-labelledby]="ariaLabelledBy"
                     [attr.aria-label]="ariaLabel || (label === 'p-emptylabel' ? undefined : label)"
+                    pAutoFocus
+                    [autofocus]="autofocus"
                 />
             </div>
             <div class="p-treeselect-label-container">
@@ -378,6 +381,11 @@ export class TreeSelect implements AfterContentInit {
      * @group Props
      */
     @Input() virtualScrollOptions: ScrollerOptions | undefined;
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @group Props
+     */
+    @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;
     /**
      * An array of treenodes.
      * @defaultValue undefined
@@ -967,7 +975,7 @@ export class TreeSelect implements AfterContentInit {
 }
 
 @NgModule({
-    imports: [CommonModule, OverlayModule, RippleModule, SharedModule, TreeModule, SearchIcon, TimesIcon, ChevronDownIcon],
+    imports: [CommonModule, OverlayModule, RippleModule, SharedModule, TreeModule, AutoFocusModule, SearchIcon, TimesIcon, ChevronDownIcon],
     exports: [TreeSelect, OverlayModule, SharedModule, TreeModule],
     declarations: [TreeSelect]
 })
diff --git a/src/app/components/tristatecheckbox/tristatecheckbox.ts b/src/app/components/tristatecheckbox/tristatecheckbox.ts
index 6f0732176ce..69dbe131571 100755
--- a/src/app/components/tristatecheckbox/tristatecheckbox.ts
+++ b/src/app/components/tristatecheckbox/tristatecheckbox.ts
@@ -5,6 +5,7 @@ import { PrimeTemplate, SharedModule } from 'primeng/api';
 import { CheckIcon } from 'primeng/icons/check';
 import { TimesIcon } from 'primeng/icons/times';
 import { Nullable } from 'primeng/ts-helpers';
+import { AutoFocusModule } from 'primeng/autofocus';
 import { TriStateCheckboxChangeEvent } from './tristatecheckbox.interface';
 
 export const TRISTATECHECKBOX_VALUE_ACCESSOR: any = {
@@ -43,6 +44,8 @@ export const TRISTATECHECKBOX_VALUE_ACCESSOR: any = {
                     [attr.aria-label]="ariaLabel"
                     inputmode="none"
                     [attr.data-pc-section]="'hiddenInput'"
+                    pAutoFocus
+                    [autofocus]="autofocus"
                 />
             </div>
             <div class="p-checkbox-box" role="checkbox" [attr.aria-checked]="value === true" [ngClass]="{ 'p-highlight': value != null, 'p-disabled': disabled, 'p-focus': focused }">
@@ -137,6 +140,11 @@ export class TriStateCheckbox implements ControlValueAccessor {
      * @group Props
      */
     @Input() checkboxFalseIcon: string | undefined;
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @group Props
+     */
+    @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;
     /**
      * Callback to invoke on value change.
      * @param {TriStateCheckboxChangeEvent} event - Custom change event.
@@ -228,7 +236,7 @@ export class TriStateCheckbox implements ControlValueAccessor {
 }
 
 @NgModule({
-    imports: [CommonModule, SharedModule, CheckIcon, TimesIcon],
+    imports: [CommonModule, SharedModule, AutoFocusModule, CheckIcon, TimesIcon],
     exports: [TriStateCheckbox, SharedModule],
     declarations: [TriStateCheckbox]
 })
diff --git a/src/app/showcase/doc/apidoc/index.json b/src/app/showcase/doc/apidoc/index.json
index c87e1474577..994042df32f 100644
--- a/src/app/showcase/doc/apidoc/index.json
+++ b/src/app/showcase/doc/apidoc/index.json
@@ -4976,6 +4976,14 @@
                             "readonly": false,
                             "type": "string",
                             "description": "Used to define a string that autocomplete attribute the current element."
+                        },
+                        {
+                            "name": "autofocus",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
                         }
                     ]
                 },
@@ -5369,6 +5377,14 @@
                             "default": "p-button-text",
                             "description": "Style class of the clear button."
                         },
+                        {
+                            "name": "autofocus",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
+                        },
                         {
                             "name": "autoZIndex",
                             "optional": false,
@@ -6376,6 +6392,14 @@
                             "type": "any",
                             "description": "Name of the disabled field of an option."
                         },
+                        {
+                            "name": "autofocus",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
+                        },
                         {
                             "name": "autoOptionFocus",
                             "optional": false,
@@ -7070,6 +7094,14 @@
                             "type": "any",
                             "default": "false",
                             "description": "Value in unchecked state."
+                        },
+                        {
+                            "name": "autofocus",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
                         }
                     ]
                 },
@@ -7409,6 +7441,14 @@
                             "type": "boolean",
                             "default": "false",
                             "description": "When enabled, a clear icon is displayed to clear the value."
+                        },
+                        {
+                            "name": "autofocus",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
                         }
                     ]
                 },
@@ -7684,6 +7724,14 @@
                             "type": "string",
                             "default": ".1s linear",
                             "description": "Transition options of the hide animation."
+                        },
+                        {
+                            "name": "autofocus",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
                         }
                     ]
                 },
@@ -13017,13 +13065,22 @@
                             "description": "Regex pattern for alpha characters"
                         },
                         {
-                            "name": "autoFocus",
+                            "name": "autofocus",
                             "optional": false,
                             "readonly": false,
                             "type": "boolean",
                             "default": "false",
                             "description": "When present, the input gets a focus automatically on load."
                         },
+                        {
+                            "name": "autoFocus",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, the input gets a focus automatically on load.",
+                            "deprecated": "Use autofocus property instead."
+                        },
                         {
                             "name": "autocomplete",
                             "optional": false,
@@ -13437,6 +13494,14 @@
                             "readonly": false,
                             "type": "boolean",
                             "description": "When present, it specifies that the element should be disabled."
+                        },
+                        {
+                            "name": "autofocus",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
                         }
                     ]
                 },
@@ -13626,6 +13691,14 @@
                             "type": "boolean",
                             "default": "false",
                             "description": "When present, it specifies that an input field is integer-only."
+                        },
+                        {
+                            "name": "autofocus",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
                         }
                     ]
                 },
@@ -13840,6 +13913,14 @@
                             "readonly": false,
                             "type": "string",
                             "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
+                        },
+                        {
+                            "name": "autofocus",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
                         }
                     ]
                 },
@@ -15997,6 +16078,14 @@
                             "type": "boolean",
                             "default": "true",
                             "description": "Whether to focus on the first visible or selected element when the overlay panel is shown."
+                        },
+                        {
+                            "name": "autofocus",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
                         }
                     ]
                 },
@@ -18079,6 +18168,14 @@
                             "readonly": false,
                             "type": null,
                             "description": "Sets the visibility of the password field."
+                        },
+                        {
+                            "name": "autofocus",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
                         }
                     ]
                 }
@@ -19338,6 +19435,14 @@
                             "readonly": false,
                             "type": "string",
                             "description": "Style class of the label."
+                        },
+                        {
+                            "name": "autofocus",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
                         }
                     ]
                 },
@@ -19497,6 +19602,14 @@
                             "readonly": false,
                             "type": "Object",
                             "description": "Inline style of the cancel icon."
+                        },
+                        {
+                            "name": "autofocus",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
                         }
                     ]
                 },
@@ -20417,6 +20530,14 @@
                             "readonly": false,
                             "type": "string",
                             "description": "A property to uniquely identify a value in options."
+                        },
+                        {
+                            "name": "autofocus",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
                         }
                     ]
                 },
@@ -21127,6 +21248,14 @@
                             "type": "number",
                             "default": "0",
                             "description": "Index of the element in tabbing order."
+                        },
+                        {
+                            "name": "autofocus",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
                         }
                     ]
                 },
@@ -21638,6 +21767,14 @@
                             "type": "boolean",
                             "default": "false",
                             "description": "When present, it specifies that the button element should be disabled."
+                        },
+                        {
+                            "name": "autofocus",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
                         }
                     ]
                 },
@@ -25481,6 +25618,14 @@
                             "type": "\"left\" | \"right\"",
                             "default": "left",
                             "description": "Position of the icon."
+                        },
+                        {
+                            "name": "autofocus",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
                         }
                     ]
                 },
@@ -26745,6 +26890,14 @@
                             "type": "string",
                             "description": "Transition options of the hide animation.",
                             "deprecated": "since v14.2.0 use overlayOptions property instead."
+                        },
+                        {
+                            "name": "autofocus",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
                         }
                     ]
                 },
@@ -28581,6 +28734,14 @@
                             "readonly": false,
                             "type": "string",
                             "description": "Specifies the icon for checkbox false value."
+                        },
+                        {
+                            "name": "autofocus",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
                         }
                     ]
                 },
@@ -28773,4 +28934,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/showcase/doc/calendar/propsdoc.ts b/src/app/showcase/doc/calendar/propsdoc.ts
index ff972ffbc8e..4bd310b0470 100644
--- a/src/app/showcase/doc/calendar/propsdoc.ts
+++ b/src/app/showcase/doc/calendar/propsdoc.ts
@@ -299,6 +299,12 @@ import { Component, Input } from '@angular/core';
                         <td>p-secondary-button</td>
                         <td>Style class of the clear button.</td>
                     </tr>
+                    <tr>
+                        <td>autofocus</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the component should automatically get focus on load.</td>
+                    </tr>
                     <tr>
                         <td>baseZIndex</td>
                         <td>number</td>

From 4522279f71ee72e8bc844c9cea21a921f7123dd4 Mon Sep 17 00:00:00 2001
From: Austin Walker <bgbrwr@gmail.com>
Date: Thu, 11 Apr 2024 14:11:29 -0600
Subject: [PATCH 2/2] fix(#13162, #13768, #13082, #10472): dialog focuses on
 content on show

---
 src/app/components/dialog/dialog.ts           | 17 +++-
 .../dynamicdialog/dynamicdialog-config.ts     |  5 +
 .../components/dynamicdialog/dynamicdialog.ts | 94 ++++++-------------
 src/app/showcase/doc/apidoc/index.json        |  2 +-
 4 files changed, 48 insertions(+), 70 deletions(-)

diff --git a/src/app/components/dialog/dialog.ts b/src/app/components/dialog/dialog.ts
index 52e76f30c0a..14f284d4a2c 100755
--- a/src/app/components/dialog/dialog.ts
+++ b/src/app/components/dialog/dialog.ts
@@ -52,7 +52,6 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{
             *ngIf="maskVisible"
             [class]="maskStyleClass"
             [style]="maskStyle"
-            (focus)="containerFocus($event)"
             [ngClass]="{
                 'p-dialog-mask': true,
                 'p-component-overlay p-component-overlay-enter': this.modal,
@@ -311,7 +310,7 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy {
      */
     @Input({ transform: numberAttribute }) minY: number = 0;
     /**
-     * When enabled, first button receives focus on show.
+     * When enabled, first focusable element receives focus on show.
      * @group Props
      */
     @Input({ transform: booleanAttribute }) focusOnShow: boolean = true;
@@ -599,12 +598,22 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy {
         return this.header !== null ? UniqueComponentId() + '_header' : null;
     }
 
-    focus() {
-        let focusable = DomHandler.getFocusableElement(this.container, '[autofocus]');
+    focus(focusParentElement = this.contentViewChild.nativeElement) {
+        let focusable = DomHandler.getFocusableElement(focusParentElement, '[autofocus]');
         if (focusable) {
             this.zone.runOutsideAngular(() => {
                 setTimeout(() => focusable.focus(), 5);
             });
+            return;
+        }
+        const focusableElement = DomHandler.getFocusableElement(focusParentElement);
+        if (focusableElement) {
+            this.zone.runOutsideAngular(() => {
+                setTimeout(() => focusableElement.focus(), 5);
+            });
+        } else if (this.footerViewChild) {
+            // If the content section is empty try to focus on footer
+            this.focus(this.footerViewChild.nativeElement);
         }
     }
 
diff --git a/src/app/components/dynamicdialog/dynamicdialog-config.ts b/src/app/components/dynamicdialog/dynamicdialog-config.ts
index cf5a7bf4e65..c71db273c6d 100755
--- a/src/app/components/dynamicdialog/dynamicdialog-config.ts
+++ b/src/app/components/dynamicdialog/dynamicdialog-config.ts
@@ -45,6 +45,11 @@ export class DynamicDialogConfig<T = any> {
      * @group Props
      */
     focusOnShow?: boolean = true;
+    /**
+     * When enabled, can only focus on elements inside the dialog.
+     * @group Props
+     */
+    focusTrap?: boolean = true;
     /**
      * Base zIndex value to use in layering.
      * @group Props
diff --git a/src/app/components/dynamicdialog/dynamicdialog.ts b/src/app/components/dynamicdialog/dynamicdialog.ts
index 3785729aaed..02a03e23834 100755
--- a/src/app/components/dynamicdialog/dynamicdialog.ts
+++ b/src/app/components/dynamicdialog/dynamicdialog.ts
@@ -22,6 +22,7 @@ import {
 } from '@angular/core';
 import { PrimeNGConfig, SharedModule, TranslationKeys } from 'primeng/api';
 import { DomHandler } from 'primeng/dom';
+import { FocusTrapModule } from 'primeng/focustrap';
 import { TimesIcon } from 'primeng/icons/times';
 import { WindowMaximizeIcon } from 'primeng/icons/windowmaximize';
 import { WindowMinimizeIcon } from 'primeng/icons/windowminimize';
@@ -64,6 +65,8 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{
                 (@animation.done)="onAnimationEnd($event)"
                 role="dialog"
                 *ngIf="visible"
+                pFocusTrap
+                [pFocusTrapDisabled]="config.focusTrap === false"
                 [style.width]="config.width"
                 [style.height]="config.height"
                 [attr.aria-labelledby]="ariaLabelledBy"
@@ -93,7 +96,7 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{
                     <ng-template pDynamicDialogContent *ngIf="!contentTemplate"></ng-template>
                     <ng-container *ngComponentOutlet="contentTemplate"></ng-container>
                 </div>
-                <div class="p-dialog-footer" *ngIf="config.footer || footerTemplate">
+                <div #footer class="p-dialog-footer" *ngIf="config.footer || footerTemplate">
                     <ng-container *ngIf="!footerTemplate">
                         {{ config.footer }}
                     </ng-container>
@@ -143,6 +146,8 @@ export class DynamicDialogComponent implements AfterViewInit, OnDestroy {
 
     @ViewChild('content') contentViewChild: Nullable<ElementRef>;
 
+    @ViewChild('footer') footerViewChild: Nullable<ElementRef>;
+
     @ViewChild('titlebar') headerViewChild: Nullable<ElementRef>;
 
     childComponentType: Nullable<Type<any>>;
@@ -217,6 +222,14 @@ export class DynamicDialogComponent implements AfterViewInit, OnDestroy {
         }
     }
 
+    get parentContent() {
+        const domElements = Array.from(this.document.getElementsByClassName('p-dialog'));
+        if (domElements.length > 0) {
+            const contentElements = domElements[domElements.length - 1].querySelector('.p-dialog-content');
+            if (contentElements) return Array.isArray(contentElements) ? contentElements[0] : contentElements;
+        }
+    }
+
     get header() {
         return this.config.header;
     }
@@ -339,7 +352,7 @@ export class DynamicDialogComponent implements AfterViewInit, OnDestroy {
                     this.enableModality();
                 }
 
-                if (this.config.focusOnShow === true) {
+                if (this.config.focusOnShow !== false) {
                     this.focus();
                 }
                 break;
@@ -354,6 +367,9 @@ export class DynamicDialogComponent implements AfterViewInit, OnDestroy {
 
     onAnimationEnd(event: AnimationEvent) {
         if (event.toState === 'void') {
+            if (this.parentContent) {
+                this.focus(this.parentContent);
+            }
             this.onContainerDestroy();
             this.dialogRef.destroy();
         }
@@ -413,45 +429,22 @@ export class DynamicDialogComponent implements AfterViewInit, OnDestroy {
         }
     }
 
-    onKeydown(event: KeyboardEvent) {
-        // tab
-        if (event.which === 9) {
-            event.preventDefault();
-
-            let focusableElements = DomHandler.getFocusableElements(this.container as HTMLDivElement);
-            if (focusableElements && focusableElements.length > 0) {
-                if (!focusableElements[0].ownerDocument.activeElement) {
-                    focusableElements[0].focus();
-                } else {
-                    let focusedIndex = focusableElements.indexOf(focusableElements[0].ownerDocument.activeElement);
-
-                    if (event.shiftKey) {
-                        if (focusedIndex == -1 || focusedIndex === 0) focusableElements[focusableElements.length - 1].focus();
-                        else focusableElements[focusedIndex - 1].focus();
-                    } else {
-                        if (focusedIndex == -1 || focusedIndex === focusableElements.length - 1) focusableElements[0].focus();
-                        else focusableElements[focusedIndex + 1].focus();
-                    }
-                }
-            }
-        }
-    }
-
-    focus() {
-        const autoFocusElement = DomHandler.findSingle(this.container, '[autofocus]');
-        if (autoFocusElement) {
+    focus(focusParentElement = this.contentViewChild.nativeElement) {
+        let focusable = DomHandler.getFocusableElement(focusParentElement, '[autofocus]');
+        if (focusable) {
             this.zone.runOutsideAngular(() => {
-                setTimeout(() => autoFocusElement.focus(), 5);
+                setTimeout(() => focusable.focus(), 5);
             });
-
             return;
         }
-
-        const focusableElements = DomHandler.getFocusableElements(this.container);
-        if (focusableElements && focusableElements.length > 0) {
+        const focusableElement = DomHandler.getFocusableElement(focusParentElement);
+        if (focusableElement) {
             this.zone.runOutsideAngular(() => {
-                setTimeout(() => focusableElements[0].focus(), 5);
+                setTimeout(() => focusableElement.focus(), 5);
             });
+        } else if (this.footerViewChild) {
+            // If the content section is empty try to focus on footer
+            this.focus(this.footerViewChild.nativeElement);
         }
     }
 
@@ -643,11 +636,6 @@ export class DynamicDialogComponent implements AfterViewInit, OnDestroy {
     }
 
     bindGlobalListeners() {
-        if (this.parentDialog) {
-            this.parentDialog.unbindDocumentKeydownListener();
-        }
-        this.bindDocumentKeydownListener();
-
         if (this.config.closeOnEscape !== false && this.config.closable !== false) {
             this.bindDocumentEscapeListener();
         }
@@ -663,34 +651,10 @@ export class DynamicDialogComponent implements AfterViewInit, OnDestroy {
     }
 
     unbindGlobalListeners() {
-        this.unbindDocumentKeydownListener();
         this.unbindDocumentEscapeListener();
         this.unbindDocumentResizeListeners();
         this.unbindDocumentDragListener();
         this.unbindDocumentDragEndListener();
-
-        if (this.parentDialog) {
-            this.parentDialog.bindDocumentKeydownListener();
-        }
-    }
-
-    bindDocumentKeydownListener() {
-        if (isPlatformBrowser(this.platformId)) {
-            if (this.documentKeydownListener) {
-                return;
-            } else {
-                this.zone.runOutsideAngular(() => {
-                    this.documentKeydownListener = this.renderer.listen(this.document, 'keydown', this.onKeydown.bind(this));
-                });
-            }
-        }
-    }
-
-    unbindDocumentKeydownListener() {
-        if (this.documentKeydownListener) {
-            this.documentKeydownListener();
-            this.documentKeydownListener = null;
-        }
     }
 
     bindDocumentEscapeListener() {
@@ -730,7 +694,7 @@ export class DynamicDialogComponent implements AfterViewInit, OnDestroy {
 }
 
 @NgModule({
-    imports: [CommonModule, WindowMaximizeIcon, WindowMinimizeIcon, TimesIcon, SharedModule],
+    imports: [CommonModule, WindowMaximizeIcon, WindowMinimizeIcon, TimesIcon, SharedModule, FocusTrapModule],
     declarations: [DynamicDialogComponent, DynamicDialogContent],
     exports: [SharedModule]
 })
diff --git a/src/app/showcase/doc/apidoc/index.json b/src/app/showcase/doc/apidoc/index.json
index 994042df32f..a034c980e31 100644
--- a/src/app/showcase/doc/apidoc/index.json
+++ b/src/app/showcase/doc/apidoc/index.json
@@ -9132,7 +9132,7 @@
                             "readonly": false,
                             "type": "boolean",
                             "default": "true",
-                            "description": "When enabled, first button receives focus on show."
+                            "description": "When enabled, first focusable element receives focus on show."
                         },
                         {
                             "name": "maximizable",