mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
feat(autocomplete): add updatePosition() method to MatAutocompleteTrigger (#11495)
This commit is contained in:
committed by
Joey Perrott
parent
6c3442a248
commit
3ce5b1f02d
@@ -230,6 +230,16 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the position of the autocomplete suggestion panel to ensure that it fits all options
|
||||
* within the viewport.
|
||||
*/
|
||||
updatePosition(): void {
|
||||
if (this._overlayAttached) {
|
||||
this._overlayRef!.updatePosition();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* A stream of actions that should close the autocomplete panel, including
|
||||
* when an option is selected, on blur, and when TAB is pressed.
|
||||
|
||||
@@ -1506,6 +1506,50 @@ describe('MatAutocomplete', () => {
|
||||
.toEqual(Math.floor(panelBottom), `Expected panel to stay aligned after filtering.`);
|
||||
}));
|
||||
|
||||
it('should fall back to above position when requested if options are added while ' +
|
||||
'the panel is open', fakeAsync(() => {
|
||||
let fixture = createComponent(AutocompleteWithOnPushDelay);
|
||||
fixture.detectChanges();
|
||||
|
||||
let inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
|
||||
let inputReference = fixture.debugElement.query(By.css('.mat-form-field-flex')).nativeElement;
|
||||
|
||||
// Push the element down so it has a little bit of space, but not enough to render.
|
||||
inputReference.style.bottom = '10px';
|
||||
inputReference.style.position = 'fixed';
|
||||
|
||||
// Focus the input to load the deferred options.
|
||||
dispatchFakeEvent(inputEl, 'focusin');
|
||||
tick(1000);
|
||||
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
const inputBottom = inputReference.getBoundingClientRect().bottom;
|
||||
const panel = overlayContainerElement.querySelector('.mat-autocomplete-panel')!;
|
||||
const panelTop = panel.getBoundingClientRect().top;
|
||||
|
||||
expect(Math.floor(inputBottom))
|
||||
.toEqual(Math.floor(panelTop),
|
||||
`Expected panel top to be below input before repositioning.`);
|
||||
|
||||
// Request a position update now that there are too many suggestions to fit in the viewport.
|
||||
fixture.componentInstance.trigger.updatePosition();
|
||||
|
||||
const inputTop = inputReference.getBoundingClientRect().top;
|
||||
const panelBottom = panel.getBoundingClientRect().bottom;
|
||||
|
||||
expect(Math.floor(inputTop))
|
||||
.toEqual(Math.floor(panelBottom),
|
||||
`Expected panel to fall back to above position after repositioning.`);
|
||||
}));
|
||||
|
||||
it('should not throw if a panel reposition is requested while the panel is closed', () => {
|
||||
let fixture = createComponent(SimpleAutocomplete);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(() => fixture.componentInstance.trigger.updatePosition()).not.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Option selection', () => {
|
||||
@@ -2303,6 +2347,7 @@ class AutocompleteWithNumbers {
|
||||
`
|
||||
})
|
||||
class AutocompleteWithOnPushDelay implements OnInit {
|
||||
@ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger;
|
||||
options: string[];
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
Reference in New Issue
Block a user