From 9344cb7dfcb33569ccac58686b11a476965417fd Mon Sep 17 00:00:00 2001
From: AleksanderBodurri <alex.bodurri@mail.utoronto.ca>
Date: Mon, 10 May 2021 18:24:35 -0400
Subject: [PATCH] feat(devtools): focus search input when icon is clicked

Previously, clicking the search icon on the component explorer did nothing. Now it focuses search input on click.
---
 cypress/integration/node-search.e2e.js        |  5 ++
 .../filter/filter.component.html              | 25 ++++----
 .../filter/filter.component.scss              | 64 ++++++++++---------
 3 files changed, 51 insertions(+), 43 deletions(-)

diff --git a/cypress/integration/node-search.e2e.js b/cypress/integration/node-search.e2e.js
index c92b291994a..effd6d7a335 100644
--- a/cypress/integration/node-search.e2e.js
+++ b/cypress/integration/node-search.e2e.js
@@ -88,4 +88,9 @@ describe('Search items in component tree', () => {
     // should show correct component properties
     cy.get('ng-property-view').find('mat-tree-node');
   });
+
+  it('should focus search input when search icon is clicked', () => {
+    cy.get('.filter label .search-icon').click({ force: true });
+    cy.get('.filter label input').should('have.focus');
+  });
 });
diff --git a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.html b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.html
index 330d47f48b2..8f71cf1d606 100644
--- a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.html
+++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.html
@@ -1,16 +1,17 @@
 <mat-card class="filter">
-  <div class="icon-outer">
-    <mat-icon color="primary">search</mat-icon>
-  </div>
-  <input
-    matInput
-    #filterInput
-    (input)="emitFilter($event)"
-    (keydown.enter)="emitNextMatched()"
-    (keydown.shift.enter)="emitPrevMatched()"
-    class="filter-input"
-    placeholder="Search components"
-  />
+  <label>
+    <div class="search-icon">
+      <mat-icon color="primary">search</mat-icon>
+    </div>
+    <input
+      matInput
+      (input)="emitFilter($event)"
+      (keydown.enter)="emitNextMatched()"
+      (keydown.shift.enter)="emitPrevMatched()"
+      class="filter-input"
+      placeholder="Search components"
+    />
+  </label>
   <div class="up-down-buttons" *ngIf="hasMatched">
     <button mat-icon-button matTooltip="Select previous element" (click)="emitPrevMatched()">
       <mat-icon class="mat-icon-rtl-mirror">
diff --git a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.scss b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.scss
index 5735f885b85..06a7d812720 100644
--- a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.scss
+++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.scss
@@ -5,36 +5,34 @@
   box-shadow: none !important;
   border-bottom: 1px solid rgba(0, 0, 0, 0.12);
 
-  .icon-outer {
+  label {
     display: flex;
-    align-items: center;
-    padding-right: 5px;
-    margin-left: 8px;
-    margin-top: 8px;
-
-    mat-icon {
-      font-size: 1.3em;
-    }
-
-    .icon {
-      width: 16px;
-      height: 16px;
-      margin: auto;
-      opacity: 0.7;
-    }
-  }
-
-  .filter-input {
-    border: none;
-    border-left: 1px solid rgba(0, 0, 0, 0.12);
-    padding-left: 5px;
     width: 100%;
-    font-size: 11px;
-    font-family: inherit;
-    font-weight: inherit;
-    height: 30px;
-    outline: none;
-    color: rgba(0, 0, 0, 0.87);
+
+    .search-icon {
+      display: flex;
+      align-items: center;
+      padding-right: 5px;
+      margin-left: 8px;
+      margin-top: 8px;
+
+      mat-icon {
+        font-size: 1.3em;
+      }
+    }
+
+    .filter-input {
+      border: none;
+      border-left: 1px solid rgba(0, 0, 0, 0.12);
+      padding-left: 5px;
+      width: 100%;
+      font-size: 11px;
+      font-family: inherit;
+      font-weight: inherit;
+      height: 30px;
+      outline: none;
+      color: rgba(0, 0, 0, 0.87);
+    }
   }
 }
 
@@ -64,8 +62,12 @@
 }
 
 :host-context(.dark-theme) {
-  .filter-input {
-    background-color: #202124;
-    color: #ffffff;
+  .filter {
+    label {
+      .filter-input {
+        background-color: #202124;
+        color: #ffffff;
+      }
+    }
   }
 }