Autocomplete dropdown width calculates on search

src/app/public/modules/autocomplete/autocomplete-adapter.service.ts

@@ -35,7 +35,7 @@ export class SkyAutocompleteAdapterService {
     });
   }
 
-  private setDropdownWidth(elementRef: ElementRef): void {
+  public setDropdownWidth(elementRef: ElementRef): void {
     const dropdownContainer = elementRef.nativeElement.querySelector('.sky-popover-container');
     const width = elementRef.nativeElement.getBoundingClientRect().width;
     this.renderer.setStyle(dropdownContainer, 'width', `${width}px`);

src/app/public/modules/autocomplete/autocomplete.component.spec.ts

@@ -356,6 +356,27 @@ describe('Autocomplete component', () => {
       }
     }));
 
+    it('should set the width of the dropdown when a search is performed', fakeAsync(() => {
+      const adapterSpy = spyOn(autocomplete['adapter'], 'setDropdownWidth').and.callThrough();
+      const rendererSpy = spyOn(autocomplete['adapter']['renderer'], 'setStyle').and.callThrough();
+
+      fixture.detectChanges();
+
+      const inputElement = getInputElement();
+
+      inputElement.value = 'r';
+      SkyAppTestUtility.fireDomEvent(inputElement, 'keyup');
+      tick();
+
+      expect(adapterSpy).toHaveBeenCalledWith(autocomplete['elementRef']);
+
+      const dropdownElement = document.querySelector('.sky-popover-container');
+      const autocompleteElement = getAutocompleteElement();
+      const formattedWidth = `${autocompleteElement.getBoundingClientRect().width}px`;
+
+      expect(rendererSpy).toHaveBeenCalledWith(dropdownElement, 'width', formattedWidth);
+    }));
+
     it('should set the width of the dropdown on window resize', fakeAsync(() => {
       const adapterSpy = spyOn(autocomplete['adapter'], 'watchDropdownWidth').and.callThrough();
       const rendererSpy = spyOn(autocomplete['adapter']['renderer'], 'setStyle').and.callThrough();

src/app/public/modules/autocomplete/autocomplete.component.ts

@@ -291,6 +291,7 @@ export class SkyAutocompleteComponent
 
         this._searchResults = results;
         this._highlightText = this.searchText;
+        this.adapter.setDropdownWidth(this.elementRef);
         this.changeDetector.markForCheck();
       });
     }