trigger watcher/relations autocomplete on focus

frontend/app/components/wp-panels/watchers-panel/watchers-panel.controller.ts

@@ -108,7 +108,8 @@ export class WatchersPanelController {
         input.val('');
         return false; // Avoid setting the value after selection
       },
-    });
+      minLength: 0
+    }).focus(() => input.autocomplete('search', input.val()));
     (input.autocomplete("instance")as any)._renderItem = (ul: any, item: any) => this.renderWatcherItem(ul, item);
   }
 
@@ -131,23 +132,24 @@ export class WatchersPanelController {
   }
 
   public autocompleteWatchers(query: string): ng.IPromise<any> {
-    if (!query) {
-      return this.$q.when([]);
-    }
-
     const deferred = this.$q.defer();
     this.autocompleteLoadingPromise = deferred.promise;
 
+    let payload:any = { sortBy: JSON.stringify([["name", "asc"]]) }
+
+    if (query && query.length > 0) {
+      let filter = {
+        name: {
+          operator: '~',
+          values: query,
+        }
+      }
+
+      payload['filters'] = JSON.stringify([filter]);
+    }
+
     this.workPackage.availableWatchers.$link.$fetch(
-      {
-        filters: JSON.stringify([{
-          name: {
-            operator: '~',
-            values: query,
-          }
-        }]),
-        sortBy: JSON.stringify([["name", "asc"]])
-      },
+      payload,
       {
         caching: {enabled: false}
       }).then((collection: CollectionResource) => {

frontend/app/components/wp-relations/wp-relations-create/wp-relations-autocomplete/wp-relations-autocomplete.directive.ts

@@ -57,11 +57,15 @@ function wpRelationsAutocompleteDirective(
       scope.options = [];
       scope.relatedWps = [];
 
-      jQuery('.wp-relations--autocomplete').autocomplete({
+      let input = jQuery('.wp-relations--autocomplete')
+      let selected = false;
+
+      input.autocomplete({
         delay: 250,
         autoFocus: false, // Accessibility!
         source: (request:{ term:string }, response:Function) => {
           autocompleteWorkPackages(request.term).then((values) => {
+            selected = false;
             response(values.map(wp => {
               return { workPackage: wp, value: getIdentifier(wp) };
             }));
@@ -69,10 +73,12 @@ function wpRelationsAutocompleteDirective(
         },
         select: (evt, ui:any) => {
           scope.$evalAsync(() => {
+            selected = true;
             scope.selectedWpId = ui.item.workPackage.id;
           });
-        }
-      });
+        },
+        minLength: 0
+      }).focus(() => !selected && input.autocomplete('search', input.val()));
 
       function getIdentifier(workPackage:WorkPackageResourceInterface):string {
         if (workPackage) {
@@ -83,10 +89,6 @@ function wpRelationsAutocompleteDirective(
       };
 
       function autocompleteWorkPackages(query:string):Promise<WorkPackageResourceInterface[]> {
-        if (!query) {
-          return $q.when([]);
-        }
-
         const deferred = $q.defer();
         loadingIndicator.indicator(scope.loadingPromiseName).promise = deferred.promise;
 

spec/features/support/components/ui_autocomplete.rb

@@ -32,6 +32,7 @@ shared_context 'ui-autocomplete helpers' do
     element.click
     # Insert the text to find
     element.set(query)
+    sleep(0.5)
 
     ##
     # Find the open dropdown