mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2026-09-09 18:03:21 +00:00
refactor: enhance file-uploading-dialog component for improved focus handling
- Added a template reference variable to the file-uploading-dialog component for better access to the dialog element. - Updated focus handling in ngOnInit to use the new reference, simplifying the code and improving clarity. - Streamlined property initializations for consistency.
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
@if (canShowDialog()) {
|
||||
<div
|
||||
#uploadDialog
|
||||
role="dialog"
|
||||
[attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.DIALOG'| translate"
|
||||
tabindex="0"
|
||||
|
||||
@@ -56,7 +56,9 @@ export class FileUploadingDialogComponent implements OnInit, OnDestroy {
|
||||
private readonly uploadService = inject(UploadService);
|
||||
private readonly changeDetector = inject(ChangeDetectorRef);
|
||||
private readonly userPreferencesService = inject(UserPreferencesService);
|
||||
private readonly elementRef = inject(ElementRef);
|
||||
|
||||
@ViewChild('uploadDialog', { read: ElementRef })
|
||||
private readonly uploadDialogRef: ElementRef<HTMLElement> | undefined;
|
||||
|
||||
/** Dialog direction. Can be 'ltr' or 'rtl. */
|
||||
private direction: Direction = 'ltr';
|
||||
@@ -70,11 +72,11 @@ export class FileUploadingDialogComponent implements OnInit, OnDestroy {
|
||||
|
||||
/** Makes the dialog always visible even when there are no uploads. */
|
||||
@Input()
|
||||
alwaysVisible: boolean = false;
|
||||
alwaysVisible = false;
|
||||
|
||||
/** Emitted when a file in the list has an error. */
|
||||
@Output()
|
||||
error: EventEmitter<any> = new EventEmitter();
|
||||
error = new EventEmitter();
|
||||
|
||||
@HostBinding('attr.adfUploadDialogRight')
|
||||
public get isPositionRight(): boolean {
|
||||
@@ -98,10 +100,7 @@ export class FileUploadingDialogComponent implements OnInit, OnDestroy {
|
||||
|
||||
ngOnInit() {
|
||||
this.dialogActive.pipe(delay(100), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
|
||||
const element: any = this.elementRef.nativeElement.querySelector('#upload-dialog');
|
||||
if (element) {
|
||||
element.focus();
|
||||
}
|
||||
this.uploadDialogRef?.nativeElement?.focus();
|
||||
});
|
||||
|
||||
this.uploadService.queueChanged.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((fileList) => {
|
||||
|
||||
Reference in New Issue
Block a user