Allow removing selected values with op-autocompleter

frontend/src/app/features/work-packages/components/filters/filter-searchable-multiselect-value/filter-searchable-multiselect-value.component.html

@@ -4,6 +4,7 @@
   <op-autocompleter
     appendTo="body"
     class="advanced-filters--ng-select -multi-select"
+    [id]="'values-' + filter.id"
     [getOptionsFn]="autocompleterFn"
     [classes]="{'-required-highlighting' : isEmpty}"
     [virtualScroll]
@@ -13,6 +14,7 @@
     [multiple]="true"
     [fetchDataDirectly]="true"
     [focusDirectly]="shouldFocus"
+    [model]="value"
     (change)="setValues($event)"
   ></op-autocompleter>
 </div>

frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.html

@@ -81,11 +81,12 @@
       let-item="item"
       let-index="index"
       let-search="searchTerm"
+      let-clear="clear"
       *ngIf="labelRequired"
     >
       <ng-container
-        [ngTemplateOutlet]="labelTemplate ? labelTemplate : defaultLabel"
-        [ngTemplateOutletContext]="{$implicit:item, search:search, index:index }"
+        [ngTemplateOutlet]="labelTemplate || defaultLabel"
+        [ngTemplateOutletContext]="{$implicit:item, search:search, index:index, clear:clear }"
       ></ng-container>
     </ng-template>
 
@@ -179,14 +180,17 @@
   </ng-container>
 </ng-template>
 
-<ng-template let-item let-search="search" #defaultLabel [ngSwitch]="resource">
-  <ng-container *ngSwitchCase="'work_packages'">
+<ng-template let-item let-search="search" let-clear="clear" #defaultLabel>
+  <ng-container *ngIf="resource === 'work_packages'">
     <span [ngOptionHighlight]="search">
       {{item.type?.name }} #{{ item.id }} {{ item.subject }}
     </span>
   </ng-container>
 
-  <ng-container *ngSwitchDefault>
-    <span [ngOptionHighlight]="search">{{ item.name }}</span>
+  <ng-container *ngIf="resource !== 'work_packages'">
+    <span class="ng-value-icon left" (click)="clear(item)">×</span>
+    <span
+      [ngOptionHighlight]="search"
+      class="ng-value-label">{{item.name}}</span>
   </ng-container>
 </ng-template>

spec/support/components/work_packages/filters.rb

@@ -170,7 +170,7 @@ module Components
             Array(value).each do |val|
               select_autocomplete page.find("#filter_#{id}"),
                                   query: val,
-                                  results_selector: '.advanced-filters--ng-select .ng-dropdown-panel-items'
+                                  results_selector: '.ng-dropdown-panel-items'
             end
           else
             within_values(id) do