fix(components/lookup): autocomplete and lookup show wait in dropdown when using an async search when no dropdown was previously open

apps/playground/src/app/components/lookup/lookup/lookup.component.html

@@ -20,9 +20,9 @@
     <p>
       <button
         class="sky-btn sky-btn-default"
-        [ngClass]="{ 'sky-btn-disabled': disabled }"
         id="btn-disable-lookup"
         type="button"
+        [ngClass]="{ 'sky-btn-disabled': disabled }"
         (click)="disableLookup()"
       >
         Disable lookup
@@ -33,8 +33,8 @@
       hintText="I'm some help text."
       labelText="Who are your friends?"
       mode="detect"
-      [disabled]="disabled"
       class="sky-margin-stacked-lg"
+      [disabled]="disabled"
     >
       <sky-lookup
         formControlName="friends2"
@@ -69,23 +69,23 @@
     </td>
   </tr>
 </table>
-<!--
+
 <div>
   <p class="lookup-single-controls">
     <button
       class="sky-btn sky-btn-default"
-      [ngClass]="{ 'sky-btn-disabled': disabled }"
       id="btn-toggle-select-mode"
       type="button"
+      [ngClass]="{ 'sky-btn-disabled': disabled }"
       (click)="toggleSelectMode()"
     >
       Toggle select mode
     </button>
     <button
       class="sky-btn sky-btn-default"
-      [ngClass]="{ 'sky-btn-disabled': disabled }"
       id="btn-reset-value"
       type="button"
+      [ngClass]="{ 'sky-btn-disabled': disabled }"
       (click)="onResetValueClick()"
     >
       Reset value
@@ -105,7 +105,7 @@
 
   <div class="app-screenshot" id="lookup-single-visual">
     <form novalidate [formGroup]="bestFriendsForm">
-      <sky-input-box [disabled]="disabled" class="sky-margin-stacked-lg">
+      <sky-input-box class="sky-margin-stacked-lg" [disabled]="disabled">
         <label class="sky-control-label"> Who is your best friend? </label>
         <sky-lookup
           formControlName="bestFriend"
@@ -120,14 +120,14 @@
           [showAddButton]="true"
           [showMoreConfig]="showMoreConfig"
           (addClick)="addButtonClicked($event)"
-         />
+        />
       </sky-input-box>
     </form>
   </div>
 
   <div class="app-screenshot" id="lookup-single-async-visual">
     <form novalidate [formGroup]="bestFriendsForm">
-      <sky-input-box [disabled]="disabled" class="sky-margin-stacked-lg">
+      <sky-input-box class="sky-margin-stacked-lg" [disabled]="disabled">
         <label class="sky-control-label">
           Who is your best friend? (async)</label
         >
@@ -138,24 +138,24 @@
           [selectMode]="bestFriendSelectMode"
           [disabled]="disabled"
           [debounceTime]="1000"
-          [enableShowMore]="true"
+          [enableShowMore]="false"
           [searchResultTemplate]="itemTemplate"
-          [showAddButton]="true"
+          [showAddButton]="false"
           [showMoreConfig]="showMoreConfig"
           (searchAsync)="bestFriendSearch($event)"
           (addClick)="addButtonClicked($event)"
-         />
+        />
       </sky-input-box>
     </form>
   </div>
 </div>
 
-<ng-template let-item="item" #itemTemplate>
+<ng-template #itemTemplate let-item="item">
   <strong>{{ item.name }}</strong
   ><br />
   {{ item.id }}
 </ng-template>
-<ng-template let-item="item" #itemTemplate2>
+<ng-template #itemTemplate2 let-item="item">
   {{ item.name }}<br />
   {{ item.id }}
 </ng-template>
@@ -191,4 +191,4 @@
       </ng-container>
     </td>
   </tr>
-</table> -->
+</table>

libs/components/lookup/src/lib/modules/autocomplete/autocomplete.component.spec.ts

@@ -77,6 +77,12 @@ describe('Autocomplete component', () => {
     ) as HTMLElement;
   }
 
+  function getWaitWrapper(): HTMLElement | null {
+    return document.querySelector<HTMLElement>(
+      '.sky-autocomplete-results-waiting',
+    );
+  }
+
   function enterSearch(
     newValue: string,
     fixture: ComponentFixture<
@@ -790,6 +796,79 @@ describe('Autocomplete component', () => {
       expect(dropdownElement).not.toBeNull();
     }));
 
+    it('should show dropdown async search is running with no action area', fakeAsync(() => {
+      fixture.detectChanges();
+      const spy = spyOn(
+        asyncAutocomplete.searchAsync,
+        'emit',
+      ).and.callThrough();
+
+      enterSearch('r', fixture, true);
+
+      expect(spy).toHaveBeenCalledWith({
+        displayType: 'popover',
+        offset: 0,
+        searchText: 'r',
+        result: jasmine.any(Observable),
+      });
+
+      let dropdownElement = getSearchResultsContainer();
+      let waitWrapper = getWaitWrapper();
+
+      expect(dropdownElement).not.toBeNull();
+      expect(waitWrapper).not.toBeNull();
+
+      tick(200);
+      fixture.detectChanges();
+
+      dropdownElement = getSearchResultsContainer();
+      waitWrapper = getWaitWrapper();
+
+      expect(dropdownElement).not.toBeNull();
+      expect(waitWrapper).toBeNull();
+
+      expect(asyncAutocomplete.searchResults.length).toEqual(6);
+      expect(asyncAutocomplete.searchResults[0].data.name).toEqual('Red');
+      expect(asyncAutocomplete.searchResults[1].data.name).toEqual('Green');
+    }));
+
+    it('should show dropdown async search is running with an action area', fakeAsync(() => {
+      component.showAddButton = true;
+      fixture.detectChanges();
+      const spy = spyOn(
+        asyncAutocomplete.searchAsync,
+        'emit',
+      ).and.callThrough();
+
+      enterSearch('r', fixture, true);
+
+      expect(spy).toHaveBeenCalledWith({
+        displayType: 'popover',
+        offset: 0,
+        searchText: 'r',
+        result: jasmine.any(Observable),
+      });
+
+      let dropdownElement = getSearchResultsContainer();
+      let waitWrapper = getWaitWrapper();
+
+      expect(dropdownElement).not.toBeNull();
+      expect(waitWrapper).not.toBeNull();
+
+      tick(200);
+      fixture.detectChanges();
+
+      dropdownElement = getSearchResultsContainer();
+      waitWrapper = getWaitWrapper();
+
+      expect(dropdownElement).not.toBeNull();
+      expect(waitWrapper).toBeNull();
+
+      expect(asyncAutocomplete.searchResults.length).toEqual(6);
+      expect(asyncAutocomplete.searchResults[0].data.name).toEqual('Red');
+      expect(asyncAutocomplete.searchResults[1].data.name).toEqual('Green');
+    }));
+
     it('should emit an undefined value when text input is cleared', fakeAsync(() => {
       fixture.detectChanges();
 

libs/components/lookup/src/lib/modules/autocomplete/autocomplete.component.ts

@@ -725,6 +725,7 @@ export class SkyAutocompleteComponent implements OnDestroy, AfterViewInit {
 
   #searchTextChanged(searchText: string | undefined): void {
     if (this.#hasFocus) {
+      this.#openDropdown();
       const isEmpty =
         !searchText || !searchText.trim() || searchText.match(/^\s+$/);
 
@@ -792,6 +793,8 @@ export class SkyAutocompleteComponent implements OnDestroy, AfterViewInit {
             this.#updateIsResultsVisible();
             this.#changeDetector.markForCheck();
 
+            // Safety check
+            /* istanbul ignore else */
             if (this.isOpen) {
               // Let the results populate in the DOM before recalculating placement.
               setTimeout(() => {