Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

RED-7783: Focus on datepicker input after selection

Browse Source
This commit is contained in:
Adina Țeudan 2023-10-24 17:05:47 +03:00
parent 7e44873dbb
commit d2ac4320dc
1 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts
View File

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