Fixed #10736 - p-password | onFocus and onBlur Event

primefaces · Oct 13, 2021 · 7bdec48 · 7bdec48
1 parent c053430
commit 7bdec48
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 9 deletions.
diff --git a/src/app/components/password/password.ts b/src/app/components/password/password.ts
@@ -1,4 +1,4 @@
-import {NgModule,Directive,ElementRef,HostListener,Input,OnDestroy,DoCheck,NgZone, OnInit, ViewEncapsulation, ChangeDetectionStrategy, ContentChildren, QueryList, TemplateRef, Component, AfterContentInit, ViewChild, ChangeDetectorRef, forwardRef} from '@angular/core';
+import {NgModule,Directive,ElementRef,HostListener,Input,OnDestroy,DoCheck,NgZone, OnInit, ViewEncapsulation, ChangeDetectionStrategy, ContentChildren, QueryList, TemplateRef, Component, AfterContentInit, ViewChild, ChangeDetectorRef, forwardRef, Output, EventEmitter} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {animate, style, transition, trigger} from '@angular/animations';
 import {NG_VALUE_ACCESSOR} from '@angular/forms';
@@ -249,8 +249,8 @@ export const Password_VALUE_ACCESSOR: any = {
     selector: 'p-password',
     template: `
         <div [ngClass]="containerClass()" [ngStyle]="style" [class]="styleClass">
-            <input #input [attr.id]="inputId" pInputText [ngClass]="inputFieldClass()" [ngStyle]="inputStyle" [class]="inputStyleClass" [attr.type]="inputType()" [attr.placeholder]="placeholder" [value]="value" (input)="onInput($event)" (focus)="onFocus()"
-                (blur)="onBlur()" (keyup)="onKeyUp($event)" />
+            <input #input [attr.id]="inputId" pInputText [ngClass]="inputFieldClass()" [ngStyle]="inputStyle" [class]="inputStyleClass" [attr.type]="inputType()" [attr.placeholder]="placeholder" [value]="value" (input)="onInput($event)" (focus)="onInputFocus($event)"
+                (blur)="onInputBlur($event)" (keyup)="onKeyUp($event)" />
             <i *ngIf="toggleMask" [ngClass]="toggleIconClass()" (click)="onMaskToggle()"></i>
             <div #overlay *ngIf="overlayVisible" [ngClass]="'p-password-panel p-component'" (click)="onOverlayClick($event)"
                 [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onAnimationStart($event)" (@overlayAnimation.done)="onAnimationEnd($event)">
@@ -329,6 +329,10 @@ export class Password implements AfterContentInit,OnInit {
 
     @ViewChild('input') input: ElementRef;
 
+    @Output() onFocus: EventEmitter<any> = new EventEmitter();
+
+    @Output() onBlur: EventEmitter<any> = new EventEmitter();
+
     contentTemplate: TemplateRef<any>;
 
     footerTemplate: TemplateRef<any>;
@@ -452,18 +456,22 @@ export class Password implements AfterContentInit,OnInit {
         this.onModelTouched();
     }
 
-    onFocus() {
+    onInputFocus(event: Event) {
         this.focused = true;
         if (this.feedback) {
             this.overlayVisible = true;
         }
+
+        this.onFocus.emit(event);
     }
 
-    onBlur() {
+    onInputBlur(event: Event) {
         this.focused = false;
         if (this.feedback) {
             this.overlayVisible = false;
         }
+
+        this.onBlur.emit(event);
     }
 
     onKeyUp(event) {

diff --git a/src/app/showcase/components/password/passworddemo.html b/src/app/showcase/components/password/passworddemo.html
@@ -45,8 +45,8 @@ <h5>Import</h5>
 </app-code>
 
             <h5>Getting Started</h5>
-            <p>Component is defined using p-password element with a mask and two-way value binding is enabled with standard ngModel directive.</p>   
-                    
+            <p>Component is defined using p-password element with a mask and two-way value binding is enabled with standard ngModel directive.</p>
+
 <app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
 &lt;input type="password" pPassword /&gt;
 &lt;p-password&gt;&lt;/p-password&gt;
@@ -206,6 +206,33 @@ <h5>Properties</h5>
                 </table>
             </div>
 
+            <h5>Events</h5>
+            <div class="doc-tablewrapper">
+                <table class="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Parameters</th>
+                            <th>Description</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>onBlur</td>
+                            <td>event: Blur event
+                            </td>
+                            <td>Callback to invoke on blur of input field.</td>
+                        </tr>
+                        <tr>
+                            <td>onFocus</td>
+                            <td>event: Focus event
+                            </td>
+                            <td>Callback to invoke on focus of input field.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
             <h5>Templates</h5>
             <div class="doc-tablewrapper">
                 <table class="doc-table">
@@ -262,7 +289,7 @@ <h5>Styling</h5>
             <h5>Dependencies</h5>
             <p>None.</p>
         </p-tabPanel>
-        
+
         <p-tabPanel header="Source">
             <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/password" class="btn-viewsource" target="_blank">
                 <span>View on GitHub</span>
@@ -311,7 +338,7 @@ <h5>Dependencies</h5>
 export class PasswordDemo &#123;
 
     value1: string;
-    
+
     value2: string;
 
     value3: string;