@@ -1606,6 +1606,39 @@ describe('MatAutocomplete', () => {
1606
1606
subscription ! . unsubscribe ( ) ;
1607
1607
} ) ) ;
1608
1608
1609
+ it ( 'should reposition the panel when the amount of options changes' , fakeAsync ( ( ) => {
1610
+ let formField = fixture . debugElement . query ( By . css ( '.mat-form-field' ) ) . nativeElement ;
1611
+ let inputReference = formField . querySelector ( '.mat-form-field-flex' ) ;
1612
+ let input = inputReference . querySelector ( 'input' ) ;
1613
+
1614
+ formField . style . bottom = '100px' ;
1615
+ formField . style . position = 'fixed' ;
1616
+
1617
+ typeInElement ( 'Cali' , input ) ;
1618
+ fixture . detectChanges ( ) ;
1619
+ tick ( ) ;
1620
+ zone . simulateZoneExit ( ) ;
1621
+ fixture . detectChanges ( ) ;
1622
+
1623
+ const inputBottom = inputReference . getBoundingClientRect ( ) . bottom ;
1624
+ const panel = overlayContainerElement . querySelector ( '.mat-autocomplete-panel' ) ! ;
1625
+ const panelTop = panel . getBoundingClientRect ( ) . top ;
1626
+
1627
+ expect ( Math . floor ( inputBottom ) ) . toBe ( Math . floor ( panelTop ) ,
1628
+ `Expected panel top to match input bottom when there is only one option.` ) ;
1629
+
1630
+ typeInElement ( '' , input ) ;
1631
+ fixture . detectChanges ( ) ;
1632
+ tick ( ) ;
1633
+ fixture . detectChanges ( ) ;
1634
+
1635
+ const inputTop = inputReference . getBoundingClientRect ( ) . top ;
1636
+ const panelBottom = panel . getBoundingClientRect ( ) . bottom ;
1637
+
1638
+ expect ( Math . floor ( inputTop ) ) . toBe ( Math . floor ( panelBottom ) ,
1639
+ `Expected panel switch to the above position if the options no longer fit.` ) ;
1640
+ } ) ) ;
1641
+
1609
1642
} ) ;
1610
1643
1611
1644
describe ( 'panel closing' , ( ) => {
0 commit comments