diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.html b/src/app/shared/collection-dropdown/collection-dropdown.component.html index 985de3dfd70..a27816c074b 100644 --- a/src/app/shared/collection-dropdown/collection-dropdown.component.html +++ b/src/app/shared/collection-dropdown/collection-dropdown.component.html @@ -27,20 +27,20 @@ } @if (searchListCollection?.length > 0) { @for (listItem of searchListCollection; track listItem) { - + } } @if ((isLoading | async)) { diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html index 5faf188165d..f02281028e2 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html @@ -19,7 +19,6 @@ [value]="year" [invalid]="showErrorMessages" [placeholder]="'form.date-picker.placeholder.year' | translate" - (blur)="onBlur($event)" (change)="onChange($event)" (focus)="onFocus($event)" > @@ -35,7 +34,6 @@ [value]="month" [placeholder]="'form.date-picker.placeholder.month' | translate" [disabled]="!year || model.disabled" - (blur)="onBlur($event)" (change)="onChange($event)" (focus)="onFocus($event)" > @@ -51,7 +49,6 @@ [value]="day" [placeholder]="'form.date-picker.placeholder.day' | translate" [disabled]="!month || model.disabled" - (blur)="onBlur($event)" (change)="onChange($event)" (focus)="onFocus($event)" > diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts index 7af8b36b65b..f67e9375aed 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts @@ -8,17 +8,14 @@ import { } from '@angular/core'; import { ComponentFixture, - fakeAsync, inject, TestBed, - tick, waitForAsync, } from '@angular/core/testing'; import { UntypedFormControl, UntypedFormGroup, } from '@angular/forms'; -import { By } from '@angular/platform-browser'; import { mockDynamicFormLayoutService, mockDynamicFormValidationService, @@ -107,7 +104,6 @@ describe('DsDatePickerComponent test suite', () => { [group]='group' [model]='model' [legend]='legend' - (blur)='onBlur($event)' (change)='onValueChange($event)' (focus)='onFocus($event)'>`; @@ -193,12 +189,6 @@ describe('DsDatePickerComponent test suite', () => { expect(dateComp.disabledDay).toBeFalsy(); }); - it('should emit blur Event onBlur', () => { - spyOn(dateComp.blur, 'emit'); - dateComp.onBlur(new Event('blur')); - expect(dateComp.blur.emit).toHaveBeenCalled(); - }); - it('should emit focus Event onFocus', () => { spyOn(dateComp.focus, 'emit'); dateComp.onFocus(new Event('focus')); @@ -271,101 +261,6 @@ describe('DsDatePickerComponent test suite', () => { expect(dateComp.disabledDay).toBeFalsy(); }); - it('should move focus on month field when on year field and tab pressed', fakeAsync(() => { - const event = { - field: 'day', - value: null, - }; - const event1 = { - field: 'month', - value: null, - }; - dateComp.onChange(event); - dateComp.onChange(event1); - - const yearElement = dateFixture.debugElement.query(By.css(`#${dateComp.model.id}_year`)); - const monthElement = dateFixture.debugElement.query(By.css(`#${dateComp.model.id}_month`)); - - yearElement.nativeElement.focus(); - dateFixture.detectChanges(); - - expect(document.activeElement).toBe(yearElement.nativeElement); - - dateFixture.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'tab' })); - dateFixture.detectChanges(); - - tick(200); - dateFixture.detectChanges(); - - expect(document.activeElement).toBe(monthElement.nativeElement); - })); - - it('should move focus on day field when on month field and tab pressed', fakeAsync(() => { - const event = { - field: 'day', - value: null, - }; - dateComp.onChange(event); - - const monthElement = dateFixture.debugElement.query(By.css(`#${dateComp.model.id}_month`)); - const dayElement = dateFixture.debugElement.query(By.css(`#${dateComp.model.id}_day`)); - - monthElement.nativeElement.focus(); - dateFixture.detectChanges(); - - expect(document.activeElement).toBe(monthElement.nativeElement); - - dateFixture.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'tab' })); - dateFixture.detectChanges(); - - tick(200); - dateFixture.detectChanges(); - - expect(document.activeElement).toBe(dayElement.nativeElement); - })); - - it('should move focus on month field when on day field and shift tab pressed', fakeAsync(() => { - const event = { - field: 'day', - value: null, - }; - dateComp.onChange(event); - - const monthElement = dateFixture.debugElement.query(By.css(`#${dateComp.model.id}_month`)); - const dayElement = dateFixture.debugElement.query(By.css(`#${dateComp.model.id}_day`)); - - dayElement.nativeElement.focus(); - dateFixture.detectChanges(); - - expect(document.activeElement).toBe(dayElement.nativeElement); - - dateFixture.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'shift.tab' })); - dateFixture.detectChanges(); - - tick(200); - dateFixture.detectChanges(); - - expect(document.activeElement).toBe(monthElement.nativeElement); - })); - - it('should move focus on year field when on month field and shift tab pressed', fakeAsync(() => { - const yearElement = dateFixture.debugElement.query(By.css(`#${dateComp.model.id}_year`)); - const monthElement = dateFixture.debugElement.query(By.css(`#${dateComp.model.id}_month`)); - - monthElement.nativeElement.focus(); - dateFixture.detectChanges(); - - expect(document.activeElement).toBe(monthElement.nativeElement); - - dateFixture.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'shift.tab' })); - dateFixture.detectChanges(); - - tick(200); - dateFixture.detectChanges(); - - expect(document.activeElement).toBe(yearElement.nativeElement); - })); - }); }); diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts index f0475fdf61a..b7e01c9c727 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts @@ -3,7 +3,6 @@ import { Component, DOCUMENT, EventEmitter, - HostListener, Inject, Input, OnInit, @@ -111,10 +110,6 @@ export class DsDatePickerComponent extends DynamicFormControlComponent implement this.maxYear = now.getUTCFullYear() + 100; } - onBlur(event) { - this.blur.emit(); - } - onChange(event) { // update year-month-day switch (event.field) { @@ -193,37 +188,6 @@ export class DsDatePickerComponent extends DynamicFormControlComponent implement this.change.emit(value); } - /** - * Listen to keydown Tab event. - * Get the active element and blur it, in order to focus the next input field. - */ - @HostListener('keydown.tab', ['$event']) - onTabKeydown(event: KeyboardEvent) { - event.preventDefault(); - const activeElement: Element = this._document.activeElement; - (activeElement as any).blur(); - const index = this.selectedFieldIndex(activeElement); - if (index < 0) { - return; - } - const fieldToFocusOn = index + 1; - if (fieldToFocusOn < this.fields.length) { - this.focusInput(this.fields[fieldToFocusOn]); - } - } - - @HostListener('keydown.shift.tab', ['$event']) - onShiftTabKeyDown(event: KeyboardEvent) { - event.preventDefault(); - const activeElement: Element = this._document.activeElement; - (activeElement as any).blur(); - const index = this.selectedFieldIndex(activeElement); - const fieldToFocusOn = index - 1; - if (fieldToFocusOn >= 0) { - this.focusInput(this.fields[fieldToFocusOn]); - } - } - private selectedFieldIndex(activeElement: Element): number { return this.fields.findIndex(field => isEqual(activeElement.id, this.model.id.concat(field))); }