fix(igxMask): prevent focus if input is readonly

IgniteUI · Mar 9, 2021 · 7e2c752 · 7e2c752
1 parent 3885913
commit 7e2c752
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 3 deletions.
diff --git a/projects/igniteui-angular/src/lib/directives/mask/mask.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/mask/mask.directive.spec.ts
@@ -7,6 +7,7 @@ import { IgxMaskModule, IgxMaskDirective } from './mask.directive';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { UIInteractions } from '../../test-utils/ui-interactions.spec';
 import { Replaced } from './mask-parsing.service';
+import { By } from '@angular/platform-browser';
 
 describe('igxMask', () => {
     configureTestSuite();
@@ -25,7 +26,8 @@ describe('igxMask', () => {
                 OneWayBindComponent,
                 PipesMaskComponent,
                 PlaceholderMaskComponent,
-                EmptyMaskTestComponent
+                EmptyMaskTestComponent,
+                ReadonlyMaskTestComponent
             ],
             imports: [
                 FormsModule,
@@ -369,7 +371,7 @@ describe('igxMask', () => {
         expect(input.nativeElement.value).toEqual('sss');
     }));
 
-    it('Apply placehodler when value is not defined.', fakeAsync(() => {
+    it('Apply placeholder when value is not defined.', fakeAsync(() => {
         const fixture = TestBed.createComponent(PlaceholderMaskComponent);
         fixture.detectChanges();
 
@@ -390,6 +392,23 @@ describe('igxMask', () => {
         expect(input.nativeElement.value).toEqual('');
         expect(input.nativeElement.placeholder).toEqual('hello');
     }));
+
+    it('should not enter edit mode if it is marked as readonly', fakeAsync(() => {
+        const fixture = TestBed.createComponent(ReadonlyMaskTestComponent);
+        fixture.detectChanges();
+
+        const maskDirective = fixture.componentInstance.mask;
+        spyOn(maskDirective, 'onFocus').and.callThrough();
+        spyOn<any>(maskDirective, 'showMask').and.callThrough();
+
+        const input = fixture.debugElement.query(By.css('.igx-input-group__input'));
+        input.triggerEventHandler('focus', {});
+        fixture.detectChanges();
+
+        expect(maskDirective.onFocus).toHaveBeenCalledTimes(1);
+        expect((maskDirective as any).showMask).toHaveBeenCalledTimes(0);
+        expect((maskDirective as any).inputValue).toEqual('');
+    }));
 });
 
 describe('igxMaskDirective ControlValueAccessor Unit', () => {
@@ -624,6 +643,16 @@ class EmptyMaskTestComponent {
     public input: ElementRef;
 }
 
+@Component({
+    template: `<igx-input-group>
+                    <input #input type="text" igxInput readonly [igxMask]="'00/00/0000'"/>
+                </igx-input-group>`
+})
+class ReadonlyMaskTestComponent {
+    @ViewChild(IgxMaskDirective)
+    public mask: IgxMaskDirective;
+}
+
 @Pipe({ name: 'inputFormat' })
 export class InputFormatPipe implements PipeTransform {
     transform(value: any): string {

diff --git a/projects/igniteui-angular/src/lib/directives/mask/mask.directive.ts b/projects/igniteui-angular/src/lib/directives/mask/mask.directive.ts
@@ -234,7 +234,10 @@ export class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueA
     /** @hidden */
     @HostListener('focus')
     public onFocus(): void {
-        // TODO: handle readonly
+        const readonly = this.nativeElement.readOnly;
+        if (readonly !== null && `${readonly}` !== 'false') {
+            return;
+        }
         this._focused = true;
         this.showMask(this._dataValue);
     }