diff --git a/lib/core/form/components/widgets/amount/amount.widget.scss b/lib/core/form/components/widgets/amount/amount.widget.scss index 4e8ea42fbf..efa92993e4 100644 --- a/lib/core/form/components/widgets/amount/amount.widget.scss +++ b/lib/core/form/components/widgets/amount/amount.widget.scss @@ -16,6 +16,7 @@ .mat-input-placeholder { margin-top: 5px; + display: none; } } diff --git a/lib/core/form/components/widgets/container/container.widget.scss b/lib/core/form/components/widgets/container/container.widget.scss index abec1ca5d1..d23cbb7e09 100644 --- a/lib/core/form/components/widgets/container/container.widget.scss +++ b/lib/core/form/components/widgets/container/container.widget.scss @@ -75,10 +75,6 @@ .mat-focused { - .mat-input-placeholder-wrapper { - display: none; - } - label { transform: scaleX(1); transition: transform 150ms linear, diff --git a/lib/core/form/components/widgets/text/text.widget.spec.ts b/lib/core/form/components/widgets/text/text.widget.spec.ts index da4585114f..78ea4f77ce 100644 --- a/lib/core/form/components/widgets/text/text.widget.spec.ts +++ b/lib/core/form/components/widgets/text/text.widget.spec.ts @@ -150,6 +150,17 @@ describe('TextWidgetComponent', () => { expect(inputElement.placeholder).toBe('simple palceholder'); }); + it('should show the field placeholder when clicked', async(() => { + inputElement.click(); + fixture.detectChanges(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(inputElement).toBeDefined(); + expect(inputElement).not.toBeNull(); + expect(inputElement.placeholder).toBe('simple palceholder'); + }); + })); + it('should prevent text to be written if is not allowed by the mask on keyUp event', async(() => { expect(element.querySelector('#text-id')).not.toBeNull(); @@ -257,6 +268,8 @@ describe('TextWidgetComponent', () => { describe('and a mask placeholder is configured', () => { + let inputElement: HTMLInputElement; + beforeEach(() => { widget.field = new FormFieldModel(new FormModel({taskId: 'fake-task-id'}), { id: 'text-id', @@ -269,14 +282,25 @@ describe('TextWidgetComponent', () => { }); fixture.detectChanges(); + inputElement = element.querySelector('#text-id'); }); it('should show the input mask placeholder', () => { - const inputElement: HTMLInputElement = element.querySelector('#text-id'); expect(inputElement).toBeDefined(); expect(inputElement).not.toBeNull(); expect(inputElement.placeholder).toBe('Phone : (__) ___-___'); }); + + it('should show the input mask placeholder when clicked', async(() => { + inputElement.click(); + fixture.detectChanges(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(inputElement).toBeDefined(); + expect(inputElement).not.toBeNull(); + expect(inputElement.placeholder).toBe('Phone : (__) ___-___'); + }); + })); }); }); }); diff --git a/lib/core/form/components/widgets/text/text.widget.ts b/lib/core/form/components/widgets/text/text.widget.ts index b73a2f88a6..5710ac380b 100644 --- a/lib/core/form/components/widgets/text/text.widget.ts +++ b/lib/core/form/components/widgets/text/text.widget.ts @@ -39,9 +39,9 @@ export class TextWidgetComponent extends WidgetComponent implements OnInit { } ngOnInit() { - if (this.field.params && this.field.params['inputMask']) { + if (this.field.params) { this.mask = this.field.params['inputMask']; - this.placeholder = this.field.params['inputMaskPlaceholder'] ? this.field.params['inputMaskPlaceholder'] : this.field.placeholder; + this.placeholder = this.field.params['inputMask'] && this.field.params['inputMaskPlaceholder'] ? this.field.params['inputMaskPlaceholder'] : this.field.placeholder; this.isMaskReversed = this.field.params['inputMaskReversed'] ? this.field.params['inputMaskReversed'] : false; } }