fix: added stealFocus directive

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 {}

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()
+  }
+}

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"

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,

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"

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) {

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"

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
   }

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"

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)

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"

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

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"

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)
   }

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"

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

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"

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
    */

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"

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,

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"

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')