diff --git a/projects/ui/src/lib/components/po-field/po-clean/po-clean-base.component.spec.ts b/projects/ui/src/lib/components/po-field/po-clean/po-clean-base.component.spec.ts index a58cc5ab21..d4ac9e316d 100644 --- a/projects/ui/src/lib/components/po-field/po-clean/po-clean-base.component.spec.ts +++ b/projects/ui/src/lib/components/po-field/po-clean/po-clean-base.component.spec.ts @@ -4,6 +4,10 @@ import { PoCleanBaseComponent } from './po-clean-base.component'; @Directive() class PoClean extends PoCleanBaseComponent { + focus(): void {} + + blur(): void {} + setInputValue(value: string): void {} getInputValue(): string { diff --git a/projects/ui/src/lib/components/po-field/po-clean/po-clean-base.component.ts b/projects/ui/src/lib/components/po-field/po-clean/po-clean-base.component.ts index 0831bb3b2b..a12d3a8745 100644 --- a/projects/ui/src/lib/components/po-field/po-clean/po-clean-base.component.ts +++ b/projects/ui/src/lib/components/po-field/po-clean/po-clean-base.component.ts @@ -29,6 +29,8 @@ export abstract class PoCleanBaseComponent { @Output('p-change-event') changeEvent: EventEmitter = new EventEmitter(); clear() { + this.focus(); + this.blur(); this.setInputValue(this.defaultValue); this.changeEvent.emit(this.defaultValue); } @@ -37,6 +39,10 @@ export abstract class PoCleanBaseComponent { return this.defaultValue !== this.getInputValue(); } + abstract focus(): void; + + abstract blur(): void; + abstract setInputValue(value: string): void; abstract getInputValue(): string; diff --git a/projects/ui/src/lib/components/po-field/po-clean/po-clean.component.spec.ts b/projects/ui/src/lib/components/po-field/po-clean/po-clean.component.spec.ts index 51407398d8..e0c94949ac 100644 --- a/projects/ui/src/lib/components/po-field/po-clean/po-clean.component.spec.ts +++ b/projects/ui/src/lib/components/po-field/po-clean/po-clean.component.spec.ts @@ -30,6 +30,34 @@ describe('PoCleanComponent', () => { expect(fixture.nativeElement.querySelector('.po-icon.po-field-icon.po-icon-close')).toBeDefined(); }); + it('focus: should call `focus` of input', () => { + component.inputRef = { + nativeElement: { + focus: () => {} + } + }; + + spyOn(component.inputRef.nativeElement, 'focus'); + + component.focus(); + + expect(component.inputRef.nativeElement.focus).toHaveBeenCalled(); + }); + + it('focus: should call `blur` of input', () => { + component.inputRef = { + nativeElement: { + blur: () => {} + } + }; + + spyOn(component.inputRef.nativeElement, 'blur'); + + component.blur(); + + expect(component.inputRef.nativeElement.blur).toHaveBeenCalled(); + }); + it('should set value to input', () => { const fakeThis = { inputRef: { diff --git a/projects/ui/src/lib/components/po-field/po-clean/po-clean.component.ts b/projects/ui/src/lib/components/po-field/po-clean/po-clean.component.ts index a5ee3dbd0a..c381420b05 100644 --- a/projects/ui/src/lib/components/po-field/po-clean/po-clean.component.ts +++ b/projects/ui/src/lib/components/po-field/po-clean/po-clean.component.ts @@ -19,6 +19,14 @@ import { PoCleanBaseComponent } from './po-clean-base.component'; templateUrl: './po-clean.component.html' }) export class PoCleanComponent extends PoCleanBaseComponent { + focus() { + this.inputRef.nativeElement.focus(); + } + + blur() { + this.inputRef.nativeElement.blur(); + } + setInputValue(value?: string) { if (this.inputRef && this.inputRef.nativeElement) { this.inputRef.nativeElement.value = value;