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

@@ -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');
+  });
 });

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">

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;
+      }
+    }
   }
 }