diff --git a/src/app/components/autocomplete/autocomplete.ts b/src/app/components/autocomplete/autocomplete.ts index 1af5b12362d..1cd6c8141f5 100755 --- a/src/app/components/autocomplete/autocomplete.ts +++ b/src/app/components/autocomplete/autocomplete.ts @@ -9,6 +9,7 @@ import {DomHandler, ConnectedOverlayScrollHandler} from 'primeng/dom'; import {ObjectUtils, UniqueComponentId, ZIndexUtils} from 'primeng/utils'; import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms'; import {Scroller, ScrollerModule, ScrollerOptions} from 'primeng/scroller'; +import {AutoFocusModule} from 'primeng/autofocus'; export const AUTOCOMPLETE_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -20,9 +21,9 @@ export const AUTOCOMPLETE_VALUE_ACCESSOR: any = { selector: 'p-autoComplete', template: ` - @@ -33,8 +34,8 @@ export const AUTOCOMPLETE_VALUE_ACCESSOR: any = {
  • -
    • @@ -105,7 +106,7 @@ export const AUTOCOMPLETE_VALUE_ACCESSOR: any = { host: { 'class': 'p-element p-inputwrapper', '[class.p-inputwrapper-filled]': 'filled', - '[class.p-inputwrapper-focus]': '(focus && !disabled) || overlayVisible', + '[class.p-inputwrapper-focus]': '((focus && !disabled) || autofocus) || overlayVisible', '[class.p-autocomplete-clearable]': 'showClear && !disabled' }, providers: [AUTOCOMPLETE_VALUE_ACCESSOR], @@ -1043,7 +1044,7 @@ export class AutoComplete implements AfterViewChecked,AfterContentInit,OnDestroy } @NgModule({ - imports: [CommonModule,InputTextModule,ButtonModule,SharedModule,RippleModule,ScrollerModule], + imports: [CommonModule,InputTextModule,ButtonModule,SharedModule,RippleModule,ScrollerModule,AutoFocusModule], exports: [AutoComplete,SharedModule,ScrollerModule], declarations: [AutoComplete] }) diff --git a/src/app/components/autofocus/autofocus.ts b/src/app/components/autofocus/autofocus.ts new file mode 100644 index 00000000000..96b3dbbd74f --- /dev/null +++ b/src/app/components/autofocus/autofocus.ts @@ -0,0 +1,43 @@ +import {NgModule,Directive,ElementRef,Input} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {DomHandler} from 'primeng/dom'; + +@Directive({ + selector: '[pAutoFocus]', + host: { + 'class': 'p-element' + } +}) + +export class AutoFocus { + + constructor (private host: ElementRef) {} + + @Input('pAutoFocus') autofocus: boolean; + + focused: boolean = false; + + ngAfterContentChecked () { + if(!this.focused) { + if(this.autofocus) { + const focusableElements = DomHandler.getFocusableElements(this.host.nativeElement); + + if(focusableElements.length === 0) { + this.host.nativeElement.focus(); + } + if(focusableElements.length > 0) { + focusableElements[0].focus(); + } + + this.focused = true; + } + } + } +} + +@NgModule({ + imports: [CommonModule], + exports: [AutoFocus], + declarations: [AutoFocus] +}) +export class AutoFocusModule { } diff --git a/src/app/components/autofocus/ng-package.json b/src/app/components/autofocus/ng-package.json new file mode 100644 index 00000000000..ab5467eb7e4 --- /dev/null +++ b/src/app/components/autofocus/ng-package.json @@ -0,0 +1,6 @@ +{ + "$schema": "ng-packagr/ng-package.schema.json", + "lib": { + "entryFile": "public_api.ts" + } + } \ No newline at end of file diff --git a/src/app/components/autofocus/public_api.ts b/src/app/components/autofocus/public_api.ts new file mode 100644 index 00000000000..67974118239 --- /dev/null +++ b/src/app/components/autofocus/public_api.ts @@ -0,0 +1 @@ +export * from './autofocus'; \ No newline at end of file diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts index e54dceffd4c..cf6c55e0ae5 100755 --- a/src/app/components/dropdown/dropdown.ts +++ b/src/app/components/dropdown/dropdown.ts @@ -10,6 +10,7 @@ import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms'; import {TooltipModule} from 'primeng/tooltip'; import {Scroller, ScrollerModule, ScrollerOptions} from 'primeng/scroller'; import {RippleModule} from 'primeng/ripple'; +import {AutoFocusModule} from 'primeng/autofocus'; export const DROPDOWN_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -72,7 +73,7 @@ export class DropdownItem {
    + [disabled]="disabled" [attr.tabindex]="tabindex" [pAutoFocus]="autofocus" [attr.aria-activedescendant]="overlayVisible ? labelId : null" role="combobox">
    {{label||'empty'}} @@ -1302,7 +1303,7 @@ export class Dropdown implements OnInit,AfterViewInit,AfterContentInit,AfterView } @NgModule({ - imports: [CommonModule,SharedModule,TooltipModule,RippleModule,ScrollerModule], + imports: [CommonModule,SharedModule,TooltipModule,RippleModule,ScrollerModule, AutoFocusModule], exports: [Dropdown,SharedModule,ScrollerModule], declarations: [Dropdown,DropdownItem] }) diff --git a/src/app/components/inputmask/inputmask.ts b/src/app/components/inputmask/inputmask.ts index 93ded66bf52..d4144fd2b96 100755 --- a/src/app/components/inputmask/inputmask.ts +++ b/src/app/components/inputmask/inputmask.ts @@ -30,6 +30,7 @@ import {CommonModule} from '@angular/common'; import {DomHandler} from 'primeng/dom'; import {InputTextModule} from 'primeng/inputtext'; import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms'; +import {AutoFocusModule} from 'primeng/autofocus'; export const INPUTMASK_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -42,7 +43,7 @@ export const INPUTMASK_VALUE_ACCESSOR: any = { template: ` `, @@ -666,7 +667,7 @@ export class InputMask implements OnInit,ControlValueAccessor { } @NgModule({ - imports: [CommonModule,InputTextModule], + imports: [CommonModule,InputTextModule, AutoFocusModule], exports: [InputMask], declarations: [InputMask] }) diff --git a/src/app/showcase/app-routing.module.ts b/src/app/showcase/app-routing.module.ts index b6786a2631a..6f903e29cbd 100755 --- a/src/app/showcase/app-routing.module.ts +++ b/src/app/showcase/app-routing.module.ts @@ -116,7 +116,8 @@ import { AppMainComponent } from './app.main.component'; {path: 'virtualscroller', loadChildren: () => import('./components/virtualscroller/virtualscrollerdemo.module').then(m => m.VirtualScrollerDemoModule)}, {path: 'accessibility', loadChildren: () => import('./components/accessibility/accessibilitydemo.module').then(m => m.AccessibilityDemoModule)}, {path: 'scroller', loadChildren: () => import('./components/scroller/scrollerdemo.module').then(m => m.ScrollerDemoModule)}, - {path: 'uikit', loadChildren: () => import('./components/uikit/uikit.module').then(m => m.UIKitModule)} + {path: 'uikit', loadChildren: () => import('./components/uikit/uikit.module').then(m => m.UIKitModule)}, + {path: 'autofocus', loadChildren: () => import('./components/autofocus/autofocusdemo.module').then(m => m.AutoFocusDemoModule)} ], }, ],{scrollPositionRestoration: 'enabled', useHash: false}) diff --git a/src/app/showcase/app.menu.component.ts b/src/app/showcase/app.menu.component.ts index 6f19d1b1d6b..aa10cc418d8 100644 --- a/src/app/showcase/app.menu.component.ts +++ b/src/app/showcase/app.menu.component.ts @@ -327,6 +327,7 @@ declare let gtag: Function; FocusTrap StyleClass Ripple + AutoFocusNew
    Utilities
    diff --git a/src/app/showcase/components/autofocus/autofocusdemo-routing.module.ts b/src/app/showcase/components/autofocus/autofocusdemo-routing.module.ts new file mode 100644 index 00000000000..32c72357e34 --- /dev/null +++ b/src/app/showcase/components/autofocus/autofocusdemo-routing.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { AutoFocusDemo } from './autofocusdemo.component'; + +@NgModule({ + imports: [RouterModule.forChild([ + { path: '', component: AutoFocusDemo } + ])], + exports: [RouterModule] +}) +export class AutoFocusDemoRoutingModule { } diff --git a/src/app/showcase/components/autofocus/autofocusdemo.component.html b/src/app/showcase/components/autofocus/autofocusdemo.component.html new file mode 100644 index 00000000000..fb48b6dcd19 --- /dev/null +++ b/src/app/showcase/components/autofocus/autofocusdemo.component.html @@ -0,0 +1,79 @@ +
    +
    +

    AutoFocus

    +

    AutoFocus manages focus on focusable element on load.

    +
    + +
    + +
    + +
    + +
    + + +
    Import
    + +import {AutoFocusModule} from 'primeng/autofocus'; + + +
    Getting Started
    +

    AutoFocus is applied to any focusable input element on initial load. It's disabled by default and needs to be enabled manually.

    + + +<input [pAutoFocus]="true" > + + + +export class AutoFocusDemo { } + + +
    Properties
    +
    + + + + + + + + + + + + + + + + + +
    NameTypeDefaultDescription
    pAutoFocusbooleannullWhen present, it specifies that the component should automatically get focus on load.
    +
    + +
    Events
    +

    Directive has no events.

    + +
    Styling
    +

    Directive does not apply any styling to host.

    + +
    Dependencies
    +

    None.

    +     + + + + View on GitHub + + + Edit in StackBlitz + + + +<input type="text" pInputText [pAutoFocus]="true" placeholder="Automatically focused" > + + + +     +
    + diff --git a/src/app/showcase/components/autofocus/autofocusdemo.component.ts b/src/app/showcase/components/autofocus/autofocusdemo.component.ts new file mode 100644 index 00000000000..0dc886bced7 --- /dev/null +++ b/src/app/showcase/components/autofocus/autofocusdemo.component.ts @@ -0,0 +1,7 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'autofocusdemo', + templateUrl: './autofocusdemo.component.html' +}) +export class AutoFocusDemo {} diff --git a/src/app/showcase/components/autofocus/autofocusdemo.module.ts b/src/app/showcase/components/autofocus/autofocusdemo.module.ts new file mode 100644 index 00000000000..0eb9856cd58 --- /dev/null +++ b/src/app/showcase/components/autofocus/autofocusdemo.module.ts @@ -0,0 +1,26 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; +import { AppCodeModule } from '../../app.code.component'; +import { TabViewModule } from 'primeng/tabview'; +import { AutoFocusModule } from 'primeng/autofocus'; +import { AppDemoActionsModule } from '../../app.demoactions.component'; +import { AutoFocusDemo } from './autofocusdemo.component'; +import { AutoFocusDemoRoutingModule } from './autofocusdemo-routing.module'; +import { InputTextModule } from 'primeng/inputtext'; + + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + AppCodeModule, + TabViewModule, + AutoFocusModule, + InputTextModule, + AppDemoActionsModule, + AutoFocusDemoRoutingModule + ], + declarations: [AutoFocusDemo], +}) +export class AutoFocusDemoModule { }