From a4a08aa667dd43c50d43910129da7a0676505019 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Fri, 11 Dec 2020 01:16:58 -0800
Subject: [PATCH] auto-select list filter field & clear on close

---
 .../filter-dropdown.component.html               |  4 ++--
 .../filter-dropdown/filter-dropdown.component.ts | 16 ++++++++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html
index 14d71a393..fad1b6663 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html
+++ b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html
@@ -1,8 +1,8 @@
-  <div class="btn-group" ngbDropdown role="group">
+  <div class="btn-group" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)">
   <button class="btn btn-outline-primary btn-sm" id="dropdown{{title}}" ngbDropdownToggle>{{title}}</button>
   <div class="dropdown-menu quick-filter shadow" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
     <div class="list-group list-group-flush">
-      <input class="list-group-item form-control form-control-sm" type="text" [(ngModel)]="filterText" placeholder="Filter {{title}}">
+      <input class="list-group-item form-control form-control-sm" type="text" [(ngModel)]="filterText" placeholder="Filter {{title}}" #filterTextInput>
       <ng-container *ngIf="(items | filter: filterText).length > 0">
         <button class="list-group-item list-group-item-action d-flex align-items-center" role="menuitem" *ngFor="let item of items | filter: filterText; let i = index" (click)="toggleItem(item)">
           <div class="selected-icon mr-1">
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.ts b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.ts
index 0522583c0..625c72be8 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.ts
+++ b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, ElementRef, ViewChild } from '@angular/core';
 import { FilterRuleType, FILTER_RULE_TYPES } from 'src/app/data/filter-rule-type';
 import { ObjectWithId } from 'src/app/data/object-with-id';
 
@@ -17,6 +17,8 @@ export class FilterDropdownComponent implements OnInit {
   @Output()
   toggle = new EventEmitter()
 
+  @ViewChild('filterTextInput') filterTextInput: ElementRef
+
   items: ObjectWithId[] = []
   itemsActive: ObjectWithId[] = []
   title: string
@@ -29,7 +31,17 @@ export class FilterDropdownComponent implements OnInit {
     this.display = filterRuleType.datatype
   }
 
-  toggleItem(item: ObjectWithId) {
+  toggleItem(item: ObjectWithId): void {
     this.toggle.emit(item)
   }
+
+  dropdownOpenChange(open: boolean): void {
+    if (open) {
+      setTimeout(() => {
+        this.filterTextInput.nativeElement.focus();
+      }, 0);
+    } else {
+      this.filterText = ''
+    }
+  }
 }