AAE-21799 replace opening datepicker on focus with opening on enter (#…

…9526)
Alfresco · Apr 8, 2024 · 966a6b7 · 966a6b7
1 parent 951b8db
commit 966a6b7
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html
@@ -13,6 +13,7 @@
                 [disabled]="field.readOnly"
                 (change)="onValueChanged($event)"
                 (dateChange)="onDateChanged($event)"
+                (keydown.enter)="datetimePicker.open()"
                 [placeholder]="field.placeholder"
                 [matTooltip]="field.tooltip"
                 (blur)="markAsTouched()"
@@ -25,9 +26,9 @@
         <error-widget [error]="field.validationSummary"></error-widget>
         <error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
         <mat-datetimepicker #datetimePicker
+            data-automation-id="adf-date-time-widget-picker"
             type="datetime"
             [touchUi]="true"
-            [openOnFocus]="true"
             [timeInterval]="5"
             [disabled]="field.readOnly">
         </mat-datetimepicker>

diff --git a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.spec.ts b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.spec.ts
@@ -439,5 +439,23 @@ describe('DateTimeWidgetComponent', () => {
             const adfLeftLabel = element.querySelector('.adf-left-label');
             expect(adfLeftLabel).toBeNull();
         });
+
+        it('should open date-time picker when enter key is pressed', async () => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task' }), {
+                id: 'datetime-id',
+                name: 'datetime-name',
+                value: '',
+                type: FormFieldTypes.DATETIME,
+                readOnly: false,
+                required: true
+            });
+
+            const input = await loader.getHarness(MatInputHarness);
+            await input.focus();
+            await (await input.host()).sendKeys('Enter');
+
+            const picker = element.querySelector('[data-automation-id="adf-date-time-widget-picker"]');
+            expect(picker).toBeTruthy();
+        });
     });
 });