From 2fc6e34384f219e70699a55ce177c8f524d45e74 Mon Sep 17 00:00:00 2001 From: DanielPais Date: Tue, 26 Aug 2025 10:58:22 -0300 Subject: [PATCH 1/7] Making it possible to make a submission using only the keyboard. --- .../collection-dropdown/collection-dropdown.component.html | 4 ++-- .../models/date-picker/date-picker.component.html | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.html b/src/app/shared/collection-dropdown/collection-dropdown.component.html index 985de3dfd70..55d5a838a2a 100644 --- a/src/app/shared/collection-dropdown/collection-dropdown.component.html +++ b/src/app/shared/collection-dropdown/collection-dropdown.component.html @@ -27,7 +27,7 @@ } @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..b151fa46b7b 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 @@ -8,7 +8,7 @@ } Date: Tue, 26 Aug 2025 11:21:37 -0300 Subject: [PATCH 2/7] Improvement, now keeping the list tag. --- .../collection-dropdown.component.html | 30 ++++++++++--------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.html b/src/app/shared/collection-dropdown/collection-dropdown.component.html index 55d5a838a2a..a3b9cca949b 100644 --- a/src/app/shared/collection-dropdown/collection-dropdown.component.html +++ b/src/app/shared/collection-dropdown/collection-dropdown.component.html @@ -27,20 +27,22 @@ } @if (searchListCollection?.length > 0) { @for (listItem of searchListCollection; track listItem) { - +
  • + +
    • } } @if ((isLoading | async)) { From 45778c4af905033efcead7355c077e79cac5c6ae Mon Sep 17 00:00:00 2001 From: DanielPais Date: Tue, 26 Aug 2025 12:12:30 -0300 Subject: [PATCH 3/7] Removing li tag. --- .../collection-dropdown/collection-dropdown.component.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.html b/src/app/shared/collection-dropdown/collection-dropdown.component.html index a3b9cca949b..a27816c074b 100644 --- a/src/app/shared/collection-dropdown/collection-dropdown.component.html +++ b/src/app/shared/collection-dropdown/collection-dropdown.component.html @@ -27,7 +27,6 @@ } @if (searchListCollection?.length > 0) { @for (listItem of searchListCollection; track listItem) { -
  • -
    • } } @if ((isLoading | async)) { From e0668ca3e46d66d25ddb9b648582b2dacbf0675b Mon Sep 17 00:00:00 2001 From: DanielPais Date: Mon, 12 Jan 2026 17:28:52 -0300 Subject: [PATCH 4/7] Removing code that attempted to force tab navigation and removing manual blur --- .../date-picker/date-picker.component.html | 6 ---- .../date-picker/date-picker.component.ts | 36 ------------------- 2 files changed, 42 deletions(-) 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 b151fa46b7b..bab23bb6dc0 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 @@ -8,7 +8,6 @@ } 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))); } From a21f3c635a79af7499618f050f6b422167e00431 Mon Sep 17 00:00:00 2001 From: DanielPais Date: Wed, 14 Jan 2026 09:58:18 -0300 Subject: [PATCH 5/7] adding tabindex again --- .../models/date-picker/date-picker.component.html | 3 +++ 1 file changed, 3 insertions(+) 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 bab23bb6dc0..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 @@ -8,6 +8,7 @@ } Date: Wed, 14 Jan 2026 11:49:20 -0300 Subject: [PATCH 6/7] test adjustments --- .../date-picker/date-picker.component.spec.ts | 107 +----------------- 1 file changed, 1 insertion(+), 106 deletions(-) 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..b9ef9c6612a 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, + 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); - })); - }); }); From 2b880582ebd038f2d8d6956d113e6f2f4699c65f Mon Sep 17 00:00:00 2001 From: DanielPais Date: Wed, 14 Jan 2026 12:14:26 -0300 Subject: [PATCH 7/7] test adjustments --- .../models/date-picker/date-picker.component.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 b9ef9c6612a..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 @@ -10,7 +10,7 @@ import { ComponentFixture, inject, TestBed, - waitForAsync + waitForAsync, } from '@angular/core/testing'; import { UntypedFormControl,