From 98f3e99e2e11a62dc04a115f80ea7a071a0f99f2 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sat, 16 Jan 2021 14:09:23 -0800
Subject: [PATCH] Prevent close button 'stealing' focus from modal input fields

---
 .../common/edit-dialog/edit-dialog.component.ts           | 7 +++++++
 .../save-view-config-dialog.component.html                | 2 +-
 .../save-view-config-dialog.component.ts                  | 8 +++++++-
 .../correspondent-edit-dialog.component.html              | 3 +--
 .../document-type-edit-dialog.component.html              | 2 +-
 .../tag-edit-dialog/tag-edit-dialog.component.html        | 2 +-
 6 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src-ui/src/app/components/common/edit-dialog/edit-dialog.component.ts b/src-ui/src/app/components/common/edit-dialog/edit-dialog.component.ts
index 46f486167..135b5a137 100644
--- a/src-ui/src/app/components/common/edit-dialog/edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/edit-dialog.component.ts
@@ -27,6 +27,8 @@ export abstract class EditDialogComponent<T extends ObjectWithId> implements OnI
 
   networkActive = false
 
+  closeEnabled = false
+
   error = null
 
   abstract getForm(): FormGroup
@@ -37,6 +39,11 @@ export abstract class EditDialogComponent<T extends ObjectWithId> implements OnI
     if (this.object != null) {
       this.objectForm.patchValue(this.object)
     }
+
+    // we wait to enable the close button so it doesnt pull browser focus since its the first clickable element in the DOM
+    setTimeout(() => {
+      this.closeEnabled = true
+    });
   }
 
   getCreateTitle() {
diff --git a/src-ui/src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.html b/src-ui/src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.html
index f2063df7e..7f1d39859 100644
--- a/src-ui/src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.html
+++ b/src-ui/src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.html
@@ -1,7 +1,7 @@
 <form [formGroup]="saveViewConfigForm" (ngSubmit)="save()">
   <div class="modal-header">
     <h4 class="modal-title" id="modal-basic-title" i18n>Save current view</h4>
-    <button type="button" class="close" aria-label="Close" (click)="cancel()">
+    <button type="button" [disabled]="!closeEnabled" class="close" aria-label="Close" (click)="cancel()">
       <span aria-hidden="true">&times;</span>
     </button>
   </div>
diff --git a/src-ui/src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.ts b/src-ui/src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.ts
index e930ffaed..57de978aa 100644
--- a/src-ui/src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.ts
+++ b/src-ui/src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.ts
@@ -20,6 +20,8 @@ export class SaveViewConfigDialogComponent implements OnInit {
   @Input()
   buttonsEnabled = true
 
+  closeEnabled = false
+
   _defaultName = ""
 
   get defaultName() {
@@ -31,7 +33,7 @@ export class SaveViewConfigDialogComponent implements OnInit {
     this._defaultName = value
     this.saveViewConfigForm.patchValue({name: value})
   }
-  
+
   saveViewConfigForm = new FormGroup({
     name: new FormControl(''),
     showInSideBar: new FormControl(false),
@@ -39,6 +41,10 @@ export class SaveViewConfigDialogComponent implements OnInit {
   })
 
   ngOnInit(): void {
+    // wait to enable close button so it doesnt steal focus form input
+    setTimeout(() => {
+      this.closeEnabled = true
+    });
   }
 
   save() {
diff --git a/src-ui/src/app/components/manage/correspondent-list/correspondent-edit-dialog/correspondent-edit-dialog.component.html b/src-ui/src/app/components/manage/correspondent-list/correspondent-edit-dialog/correspondent-edit-dialog.component.html
index 3544aeed0..bbc2c8453 100644
--- a/src-ui/src/app/components/manage/correspondent-list/correspondent-edit-dialog/correspondent-edit-dialog.component.html
+++ b/src-ui/src/app/components/manage/correspondent-list/correspondent-edit-dialog/correspondent-edit-dialog.component.html
@@ -1,12 +1,11 @@
 <form [formGroup]="objectForm" (ngSubmit)="save()">
   <div class="modal-header">
     <h4 class="modal-title" id="modal-basic-title">{{getTitle()}}</h4>
-    <button type="button" class="close" aria-label="Close" (click)="cancel()">
+    <button type="button" [disabled]="!closeEnabled" class="close" aria-label="Close" (click)="cancel()">
       <span aria-hidden="true">&times;</span>
     </button>
   </div>
   <div class="modal-body">
-
     <app-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></app-input-text>
     <app-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></app-input-select>
     <app-input-text *ngIf="patternRequired" i18n-title title="Matching pattern" formControlName="match"></app-input-text>
diff --git a/src-ui/src/app/components/manage/document-type-list/document-type-edit-dialog/document-type-edit-dialog.component.html b/src-ui/src/app/components/manage/document-type-list/document-type-edit-dialog/document-type-edit-dialog.component.html
index 8c3e848f5..ed9f4f5af 100644
--- a/src-ui/src/app/components/manage/document-type-list/document-type-edit-dialog/document-type-edit-dialog.component.html
+++ b/src-ui/src/app/components/manage/document-type-list/document-type-edit-dialog/document-type-edit-dialog.component.html
@@ -1,7 +1,7 @@
 <form [formGroup]="objectForm" (ngSubmit)="save()">
     <div class="modal-header">
       <h4 class="modal-title" id="modal-basic-title">{{getTitle()}}</h4>
-      <button type="button" class="close" aria-label="Close" (click)="cancel()">
+      <button type="button" [disabled]="!closeEnabled" class="close" aria-label="Close" (click)="cancel()">
         <span aria-hidden="true">&times;</span>
       </button>
     </div>
diff --git a/src-ui/src/app/components/manage/tag-list/tag-edit-dialog/tag-edit-dialog.component.html b/src-ui/src/app/components/manage/tag-list/tag-edit-dialog/tag-edit-dialog.component.html
index 57f3b19fd..fd4c3b7f0 100644
--- a/src-ui/src/app/components/manage/tag-list/tag-edit-dialog/tag-edit-dialog.component.html
+++ b/src-ui/src/app/components/manage/tag-list/tag-edit-dialog/tag-edit-dialog.component.html
@@ -1,7 +1,7 @@
   <form [formGroup]="objectForm" (ngSubmit)="save()">
     <div class="modal-header">
       <h4 class="modal-title" id="modal-basic-title">{{getTitle()}}</h4>
-      <button type="button" class="close" aria-label="Close" (click)="cancel()">
+      <button type="button" [disabled]="!closeEnabled" class="close" aria-label="Close" (click)="cancel()">
         <span aria-hidden="true">&times;</span>
       </button>
     </div>