diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts index 8af4f5c59..2ac88f765 100644 --- a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts +++ b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts @@ -1,6 +1,6 @@ import { Component, HostListener, Input, OnDestroy } from '@angular/core'; import { Dossier, File, FileAttributeConfigTypes, IFileAttributeConfig } from '@red/domain'; -import { BaseFormComponent, HelpModeService, ListingService, Toaster } from '@iqser/common-ui'; +import { BaseFormComponent, Debounce, HelpModeService, ListingService, Toaster } from '@iqser/common-ui'; import { PermissionsService } from '@services/permissions.service'; import { AbstractControl, FormBuilder, UntypedFormGroup, ValidatorFn } from '@angular/forms'; import { FileAttributesService } from '@services/entity-services/file-attributes.service'; @@ -78,9 +78,15 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr this.#subscriptions.add(sub2.subscribe()); } - @HostListener('document:click') - clickOutside() { - if (this.isInEditMode && this.closedDatepicker) { + @Debounce(60) + @HostListener('document:click', ['$event']) + clickOutside($event: MouseEvent) { + const clickCalendarCell = ($event.target as HTMLElement).classList?.contains('mat-calendar-body-cell-content'); + if (this.isDate) { + this._focusOnEditInput(); + } + + if (this.isInEditMode && this.closedDatepicker && !clickCalendarCell) { this.close(); } } @@ -217,21 +223,20 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr this.isInEditMode = !this.isInEditMode; if (this.isInEditMode) { - this.#focusOnEditInput(); + this._focusOnEditInput(); } } - #focusOnEditInput(): void { + @Debounce(100) + private _focusOnEditInput(): void { if (this.isDate || this.isText) { - setTimeout(() => { - const input = document.getElementById(this.fileAttribute.id) as HTMLInputElement; - if (!input) { - return; - } - const end = input.value.length; - input.setSelectionRange(end, end); - input.focus(); - }, 100); + const input = document.getElementById(this.fileAttribute.id) as HTMLInputElement; + if (!input) { + return; + } + const end = input.value.length; + input.setSelectionRange(end, end); + input.focus(); } } }