From 9a79f37bf143a1e05df7407358e2687c678e3e68 Mon Sep 17 00:00:00 2001
From: Mihajlo Medjedovic <mihajlo.medjedovic@outlook.com>
Date: Thu, 30 May 2024 09:47:08 +0200
Subject: [PATCH] fix: added stealFocus directive

---
 client/src/app/directives/directives.module.ts |  7 +++++--
 .../app/directives/steal-focus.directive.ts    | 18 ++++++++++++++++++
 client/src/app/group/group.component.html      |  2 +-
 client/src/app/group/group.component.ts        |  9 ---------
 client/src/app/home/home.component.html        |  4 ++--
 client/src/app/home/home.component.ts          |  9 ---------
 client/src/app/lineage/lineage.component.html  |  6 +++---
 client/src/app/lineage/lineage.component.ts    |  9 ---------
 .../src/app/metadata/metadata.component.html   |  2 +-
 client/src/app/metadata/metadata.component.ts  |  9 ---------
 client/src/app/role/role.component.html        |  2 +-
 client/src/app/role/role.component.ts          |  9 ---------
 .../app/shared/dc-tree/dc-tree.component.html  |  6 +++---
 .../app/shared/dc-tree/dc-tree.component.ts    |  9 ---------
 client/src/app/user/user.component.html        |  2 +-
 client/src/app/user/user.component.ts          |  9 ---------
 client/src/app/viewer/viewer.component.html    |  4 ++--
 client/src/app/viewer/viewer.component.ts      |  9 ---------
 .../viya-api-explorer.component.html           |  2 +-
 .../viya-api-explorer.component.ts             |  9 ---------
 client/src/app/xlmap/xlmap.component.html      |  2 +-
 client/src/app/xlmap/xlmap.component.ts        |  9 ---------
 22 files changed, 39 insertions(+), 108 deletions(-)
 create mode 100644 client/src/app/directives/steal-focus.directive.ts

diff --git a/client/src/app/directives/directives.module.ts b/client/src/app/directives/directives.module.ts
index c919ee0..404e2b4 100644
--- a/client/src/app/directives/directives.module.ts
+++ b/client/src/app/directives/directives.module.ts
@@ -4,20 +4,23 @@ import { NgVarDirective } from './ng-var.directive'
 import { DragNdropDirective } from './drag-ndrop.directive'
 import { FileDropDirective } from './file-drop.directive'
 import { FileSelectDirective } from './file-select.directive'
+import { StealFocusDirective } from './steal-focus.directive'
 
 @NgModule({
   declarations: [
     NgVarDirective,
     DragNdropDirective,
     FileDropDirective,
-    FileSelectDirective
+    FileSelectDirective,
+    StealFocusDirective
   ],
   imports: [CommonModule],
   exports: [
     NgVarDirective,
     DragNdropDirective,
     FileDropDirective,
-    FileSelectDirective
+    FileSelectDirective,
+    StealFocusDirective
   ]
 })
 export class DirectivesModule {}
diff --git a/client/src/app/directives/steal-focus.directive.ts b/client/src/app/directives/steal-focus.directive.ts
new file mode 100644
index 0000000..d806090
--- /dev/null
+++ b/client/src/app/directives/steal-focus.directive.ts
@@ -0,0 +1,18 @@
+import { Directive, HostListener } from '@angular/core';
+
+@Directive({
+  selector: '[appStealFocus]'
+})
+export class StealFocusDirective {
+
+  constructor() { }
+
+  /**
+   * For some reason newest version of Clarity v17.0.1 is stealing focus when
+   * clicking on the input inside of the clr-tree-view
+   * This is workaround
+   */
+  @HostListener('click', ['$event']) onClick(event: any){
+    event.target.focus()
+  }
+}
diff --git a/client/src/app/group/group.component.html b/client/src/app/group/group.component.html
index 509113d..653127f 100644
--- a/client/src/app/group/group.component.html
+++ b/client/src/app/group/group.component.html
@@ -3,7 +3,7 @@
     <clr-tree-node *ngIf="groups" class="search-node">
       <div class="tree-search-wrapper">
         <input
-          (click)="stealFocusFix($event)"
+          appStealFocus
           clrInput
           #searchLibTreeInput
           placeholder="Filter by Groups"
diff --git a/client/src/app/group/group.component.ts b/client/src/app/group/group.component.ts
index 9495f35..6c5be2f 100644
--- a/client/src/app/group/group.component.ts
+++ b/client/src/app/group/group.component.ts
@@ -147,15 +147,6 @@ export class GroupComponent implements OnInit {
     }
   }
 
-  /**
-   * For some reason newest version of Clarity v17.0.1 is stealing focus when
-   * clicking on the input inside of the clr-tree-view
-   * This is workaround
-   */
-  public stealFocusFix(event: any) {
-    event.target.focus()
-  }
-
   public groupListOnFilter() {
     this.helperService.libraryOnFilter(
       this.groups,
diff --git a/client/src/app/home/home.component.html b/client/src/app/home/home.component.html
index 27243fb..436110a 100644
--- a/client/src/app/home/home.component.html
+++ b/client/src/app/home/home.component.html
@@ -3,8 +3,8 @@
     <clr-tree-node *ngIf="treeNodeLibraries?.length! > 0" class="search-node">
       <div class="tree-search-wrapper">
         <input
-          (click)="stealFocusFix($event)"
           clrInput
+          appStealFocus
           #searchLibTreeInput
           placeholder="Libraries"
           name="input"
@@ -47,7 +47,7 @@
         <clr-tree-node *ngIf="library['tables']" class="search-node">
           <div class="tree-search-wrapper">
             <input
-              (click)="stealFocusFix($event)"
+              appStealFocus
               clrInput
               #searchTreeInput
               placeholder="Tables"
diff --git a/client/src/app/home/home.component.ts b/client/src/app/home/home.component.ts
index a26a8ce..9e531ba 100644
--- a/client/src/app/home/home.component.ts
+++ b/client/src/app/home/home.component.ts
@@ -45,15 +45,6 @@ export class HomeComponent implements AfterContentInit {
     private sasService: SasService
   ) {}
 
-  /**
-   * For some reason newest version of Clarity v17.0.1 is stealing focus when
-   * clicking on the input inside of the clr-tree-view
-   * This is workaround
-   */
-  public stealFocusFix(event: any) {
-    event.target.focus()
-  }
-
   public collapseLibraryItems(libraries: any, libraryToSkip: any) {
     libraries.forEach((library: any) => {
       if (library.LIBRARYID !== libraryToSkip.LIBRARYID) {
diff --git a/client/src/app/lineage/lineage.component.html b/client/src/app/lineage/lineage.component.html
index 97efde2..f9c4b4b 100644
--- a/client/src/app/lineage/lineage.component.html
+++ b/client/src/app/lineage/lineage.component.html
@@ -3,7 +3,7 @@
     <clr-tree-node *ngIf="libraryList" class="search-node">
       <div class="tree-search-wrapper">
         <input
-          (click)="stealFocusFix($event)"
+          appStealFocus
           clrInput
           #searchLibTreeInput
           placeholder="Libraries"
@@ -43,7 +43,7 @@
         <clr-tree-node *ngIf="library['tables']" class="search-node">
           <div class="tree-search-wrapper">
             <input
-              (click)="stealFocusFix($event)"
+              appStealFocus
               clrInput
               #searchTreeInput
               placeholder="Tables"
@@ -87,7 +87,7 @@
           <clr-tree-node *ngIf="libTable['columns']" class="search-node">
             <div class="tree-search-wrapper">
               <input
-                (click)="stealFocusFix($event)"
+                appStealFocus
                 clrInput
                 #searchTreeInput
                 placeholder="Columns"
diff --git a/client/src/app/lineage/lineage.component.ts b/client/src/app/lineage/lineage.component.ts
index 6ee263e..ee1a740 100644
--- a/client/src/app/lineage/lineage.component.ts
+++ b/client/src/app/lineage/lineage.component.ts
@@ -71,15 +71,6 @@ export class LineageComponent {
     public helperService: HelperService
   ) {}
 
-  /**
-   * For some reason newest version of Clarity v17.0.1 is stealing focus when
-   * clicking on the input inside of the clr-tree-view
-   * This is workaround
-   */
-  public stealFocusFix(event: any) {
-    event.target.focus()
-  }
-
   public showTableSelect() {
     this.tableFlag = !this.tableFlag
   }
diff --git a/client/src/app/metadata/metadata.component.html b/client/src/app/metadata/metadata.component.html
index 9374beb..5429c18 100644
--- a/client/src/app/metadata/metadata.component.html
+++ b/client/src/app/metadata/metadata.component.html
@@ -22,7 +22,7 @@
     <clr-tree-node *ngIf="metaDataList" class="search-node">
       <div class="tree-search-wrapper">
         <input
-          (click)="stealFocusFix($event)"
+          appStealFocus
           clrInput
           #searchLibTreeInput
           placeholder="search SAS Types"
diff --git a/client/src/app/metadata/metadata.component.ts b/client/src/app/metadata/metadata.component.ts
index 2eeb39f..0964de9 100644
--- a/client/src/app/metadata/metadata.component.ts
+++ b/client/src/app/metadata/metadata.component.ts
@@ -150,15 +150,6 @@ export class MetadataComponent implements OnInit {
     }
   }
 
-  /**
-   * For some reason newest version of Clarity v17.0.1 is stealing focus when
-   * clicking on the input inside of the clr-tree-view
-   * This is workaround
-   */
-  public stealFocusFix(event: any) {
-    event.target.focus()
-  }
-
   public treeNodeClicked(event: any, item: any, tree: any) {
     if (event.target.title === 'Collapse') {
       this.collapseTreeItems(tree, item)
diff --git a/client/src/app/role/role.component.html b/client/src/app/role/role.component.html
index d264f29..15fcf4b 100644
--- a/client/src/app/role/role.component.html
+++ b/client/src/app/role/role.component.html
@@ -3,7 +3,7 @@
     <clr-tree-node *ngIf="roles" class="search-node">
       <div class="tree-search-wrapper">
         <input
-          (click)="stealFocusFix($event)"
+          appStealFocus
           clrInput
           #searchLibTreeInput
           placeholder="Filter by Roles"
diff --git a/client/src/app/role/role.component.ts b/client/src/app/role/role.component.ts
index dc6639c..cb66d56 100644
--- a/client/src/app/role/role.component.ts
+++ b/client/src/app/role/role.component.ts
@@ -106,15 +106,6 @@ export class RoleComponent implements OnInit {
     }
   }
 
-  /**
-   * For some reason newest version of Clarity v17.0.1 is stealing focus when
-   * clicking on the input inside of the clr-tree-view
-   * This is workaround
-   */
-  public stealFocusFix(event: any) {
-    event.target.focus()
-  }
-
   public roleListOnFilter() {
     this.helperService.libraryOnFilter(this.roles, this.roleSearch, 'ROLENAME')
     globals.usernav.roleSearch = this.roleSearch
diff --git a/client/src/app/shared/dc-tree/dc-tree.component.html b/client/src/app/shared/dc-tree/dc-tree.component.html
index 677dbe6..a68a8c9 100644
--- a/client/src/app/shared/dc-tree/dc-tree.component.html
+++ b/client/src/app/shared/dc-tree/dc-tree.component.html
@@ -2,7 +2,7 @@
   <clr-tree-node *ngIf="libraryList" class="search-node">
     <div class="tree-search-wrapper">
       <input
-        (click)="stealFocusFix($event)"
+        appStealFocus
         clrInput
         #searchLibTreeInput
         placeholder="Libraries"
@@ -46,7 +46,7 @@
       <clr-tree-node *ngIf="library['tables']" class="search-node">
         <div class="tree-search-wrapper">
           <input
-            (click)="stealFocusFix($event)"
+            appStealFocus
             clrInput
             #searchTreeInput
             placeholder="Tables"
@@ -116,7 +116,7 @@
             <clr-tree-node *ngIf="libTable['columns']" class="search-node">
               <div class="tree-search-wrapper">
                 <input
-                  (click)="stealFocusFix($event)"
+                  appStealFocus
                   clrInput
                   #searchTreeInput
                   placeholder="Columns"
diff --git a/client/src/app/shared/dc-tree/dc-tree.component.ts b/client/src/app/shared/dc-tree/dc-tree.component.ts
index feb4bb8..b1769fb 100644
--- a/client/src/app/shared/dc-tree/dc-tree.component.ts
+++ b/client/src/app/shared/dc-tree/dc-tree.component.ts
@@ -66,15 +66,6 @@ export class DcTreeComponent implements OnInit, AfterViewInit, OnChanges {
     }
   }
 
-  /**
-   * For some reason newest version of Clarity v17.0.1 is stealing focus when
-   * clicking on the input inside of the clr-tree-view
-   * This is workaround
-   */
-  public stealFocusFix(event: any) {
-    event.target.focus()
-  }
-
   treeOnFilter(array: any, arrToFilter: string) {
     this.helperService.treeOnFilter(array, arrToFilter)
   }
diff --git a/client/src/app/user/user.component.html b/client/src/app/user/user.component.html
index fb67bdc..47bcda0 100644
--- a/client/src/app/user/user.component.html
+++ b/client/src/app/user/user.component.html
@@ -3,7 +3,7 @@
     <clr-tree-node *ngIf="users" class="search-node">
       <div class="tree-search-wrapper">
         <input
-          (click)="stealFocusFix($event)"
+          appStealFocus
           clrInput
           #searchLibTreeInput
           placeholder="Filter by Users"
diff --git a/client/src/app/user/user.component.ts b/client/src/app/user/user.component.ts
index c592057..bc7ee21 100644
--- a/client/src/app/user/user.component.ts
+++ b/client/src/app/user/user.component.ts
@@ -184,15 +184,6 @@ export class UserComponent implements OnInit {
     }
   }
 
-  /**
-   * For some reason newest version of Clarity v17.0.1 is stealing focus when
-   * clicking on the input inside of the clr-tree-view
-   * This is workaround
-   */
-  public stealFocusFix(event: any) {
-    event.target.focus()
-  }
-
   public userListOnFilter() {
     this.helperService.libraryOnFilter(this.users, this.userSearch, 'NAME')
     globals.usernav.userSearch = this.userSearch
diff --git a/client/src/app/viewer/viewer.component.html b/client/src/app/viewer/viewer.component.html
index 76799fd..5f76b51 100644
--- a/client/src/app/viewer/viewer.component.html
+++ b/client/src/app/viewer/viewer.component.html
@@ -7,7 +7,7 @@
     <clr-tree-node *ngIf="libraries" class="search-node">
       <div class="tree-search-wrapper">
         <input
-          (click)="stealFocusFix($event)"
+          appStealFocus
           clrInput
           #searchLibTreeInput
           [(ngModel)]="librariesSearch"
@@ -51,7 +51,7 @@
         <clr-tree-node *ngIf="library['tables']" class="search-node">
           <div class="tree-search-wrapper">
             <input
-              (click)="stealFocusFix($event)"
+              appStealFocus
               clrInput
               #searchTreeInput
               [id]="'search_' + library.LIBRARYREF"
diff --git a/client/src/app/viewer/viewer.component.ts b/client/src/app/viewer/viewer.component.ts
index f5ac816..f42d6ef 100644
--- a/client/src/app/viewer/viewer.component.ts
+++ b/client/src/app/viewer/viewer.component.ts
@@ -215,15 +215,6 @@ export class ViewerComponent implements AfterContentInit, AfterViewInit {
     )
   }
 
-  /**
-   * For some reason newest version of Clarity v17.0.1 is stealing focus when
-   * clicking on the input inside of the clr-tree-view
-   * This is workaround
-   */
-  public stealFocusFix(event: any) {
-    event.target.focus()
-  }
-
   /**
    * Open viewboxes modal
    */
diff --git a/client/src/app/viya-api-explorer/viya-api-explorer.component.html b/client/src/app/viya-api-explorer/viya-api-explorer.component.html
index 29e1514..871cf8a 100644
--- a/client/src/app/viya-api-explorer/viya-api-explorer.component.html
+++ b/client/src/app/viya-api-explorer/viya-api-explorer.component.html
@@ -38,7 +38,7 @@
     <clr-tree-node *ngIf="endpointLinks.length > 0" class="search-node">
       <div class="tree-search-wrapper">
         <input
-          (click)="stealFocusFix($event)"
+          appStealFocus
           clrInput
           #searchLinksTreeInput
           placeholder="Search links"
diff --git a/client/src/app/viya-api-explorer/viya-api-explorer.component.ts b/client/src/app/viya-api-explorer/viya-api-explorer.component.ts
index 1b3ed74..4d9c409 100644
--- a/client/src/app/viya-api-explorer/viya-api-explorer.component.ts
+++ b/client/src/app/viya-api-explorer/viya-api-explorer.component.ts
@@ -53,15 +53,6 @@ export class ViyaApiExplorerComponent implements OnInit {
     this.collections = this.sasViyaService.getAllCollections()
   }
 
-  /**
-   * For some reason newest version of Clarity v17.0.1 is stealing focus when
-   * clicking on the input inside of the clr-tree-view
-   * This is workaround
-   */
-  public stealFocusFix(event: any) {
-    event.target.focus()
-  }
-
   linksListOnFilter() {
     this.helperService.libraryOnFilter(
       this.endpointLinks,
diff --git a/client/src/app/xlmap/xlmap.component.html b/client/src/app/xlmap/xlmap.component.html
index b59545b..0fd98b8 100644
--- a/client/src/app/xlmap/xlmap.component.html
+++ b/client/src/app/xlmap/xlmap.component.html
@@ -7,7 +7,7 @@
     <clr-tree-node class="search-node">
       <div class="tree-search-wrapper">
         <input
-          (click)="stealFocusFix($event)"
+          appStealFocus
           clrInput
           #searchXLMapTreeInput
           placeholder="Filter by Id"
diff --git a/client/src/app/xlmap/xlmap.component.ts b/client/src/app/xlmap/xlmap.component.ts
index 8d557fb..4facf5e 100644
--- a/client/src/app/xlmap/xlmap.component.ts
+++ b/client/src/app/xlmap/xlmap.component.ts
@@ -143,15 +143,6 @@ export class XLMapComponent implements AfterContentInit, AfterViewInit, OnInit {
     private sasService: SasService
   ) {}
 
-  /**
-   * For some reason newest version of Clarity v17.0.1 is stealing focus when
-   * clicking on the input inside of the clr-tree-view
-   * This is workaround
-   */
-  public stealFocusFix(event: any) {
-    event.target.focus()
-  }
-
   public afterGetColHeader(column: number, th: any) {
     // Dark mode
     th.classList.add('darkTH')