Skip to content
This repository has been archived by the owner on Dec 8, 2022. It is now read-only.

Commit

Permalink
Autocomplete size/position now calculates on focus (#2)
Browse files Browse the repository at this point in the history
  • Loading branch information
Blackbaud-AlexKingman authored and Blackbaud-SteveBrush committed Nov 12, 2018
1 parent 8d3427b commit 6089a9e
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -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`);
Expand Down
21 changes: 21 additions & 0 deletions src/app/public/modules/autocomplete/autocomplete.component.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -291,6 +291,7 @@ export class SkyAutocompleteComponent

this._searchResults = results;
this._highlightText = this.searchText;
this.adapter.setDropdownWidth(this.elementRef);
this.changeDetector.markForCheck();
});
}
Expand Down

0 comments on commit 6089a9e

Please sign in to comment.