Keyboard submission

src/app/shared/collection-dropdown/collection-dropdown.component.html

@@ -27,20 +27,20 @@
   }
   @if (searchListCollection?.length > 0) {
     @for (listItem of searchListCollection; track listItem) {
-      <li
-        class="dropdown-item collection-item"
-        role="menuitem"
-        title="{{ listItem.collection.name }}"
-        (click)="onSelect(listItem)">
-        <div class="list-unstyled mb-0">
-          @for (item of listItem.communities; track item) {
-            <div class="list-item text-truncate text-secondary">
-              {{ item.name}} <i class="fa fa-level-down" aria-hidden="true"></i>
-            </div>
-          }
-          <div class="list-item text-truncate text-primary fw-bold">{{ listItem.collection.name}}</div>
-        </div>
-      </li>
+        <button
+          class="dropdown-item collection-item"
+          role="menuitem"
+          title="{{ listItem.collection.name }}"
+          (click)="onSelect(listItem)">
+          <div class="list-unstyled mb-0">
+            @for (item of listItem.communities; track item) {
+              <div class="list-item text-truncate text-secondary">
+                {{ item.name}} <i class="fa fa-level-down" aria-hidden="true"></i>
+              </div>
+            }
+            <div class="list-item text-truncate text-primary fw-bold">{{ listItem.collection.name}}</div>
+          </div>
+        </button>
     }
   }
   @if ((isLoading | async)) {

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)"
   ></ds-number-picker>
@@ -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)"
   ></ds-number-picker>
@@ -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)"
   ></ds-number-picker>

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)'></ds-date-picker>`;
 
@@ -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);
-      }));
-
     });
   });
 

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)));
   }