@@ -987,37 +987,41 @@ describe('MdSelect', () => {
987
987
select . style . marginRight = '30px' ;
988
988
} ) ;
989
989
990
- it ( 'should align the trigger and the selected option on the x-axis in ltr' , ( ) => {
990
+ it ( 'should align the trigger and the selected option on the x-axis in ltr' , async ( ( ) => {
991
991
trigger . click ( ) ;
992
992
fixture . detectChanges ( ) ;
993
993
994
- const triggerLeft = trigger . getBoundingClientRect ( ) . left ;
995
- const firstOptionLeft =
996
- document . querySelector ( '.cdk-overlay-pane md-option' ) . getBoundingClientRect ( ) . left ;
997
-
998
- // Each option is 32px wider than the trigger, so it must be adjusted 16px
999
- // to ensure the text overlaps correctly.
1000
- expect ( firstOptionLeft . toFixed ( 2 ) )
1001
- . toEqual ( ( triggerLeft - 16 ) . toFixed ( 2 ) ,
1002
- `Expected trigger to align with the selected option on the x-axis in LTR.` ) ;
1003
- } ) ;
994
+ fixture . whenStable ( ) . then ( ( ) => {
995
+ const triggerLeft = trigger . getBoundingClientRect ( ) . left ;
996
+ const firstOptionLeft =
997
+ document . querySelector ( '.cdk-overlay-pane md-option' ) . getBoundingClientRect ( ) . left ;
998
+
999
+ // Each option is 32px wider than the trigger, so it must be adjusted 16px
1000
+ // to ensure the text overlaps correctly.
1001
+ expect ( firstOptionLeft . toFixed ( 2 ) )
1002
+ . toEqual ( ( triggerLeft - 16 ) . toFixed ( 2 ) ,
1003
+ `Expected trigger to align with the selected option on the x-axis in LTR.` ) ;
1004
+ } ) ;
1005
+ } ) ) ;
1004
1006
1005
- it ( 'should align the trigger and the selected option on the x-axis in rtl' , ( ) => {
1007
+ it ( 'should align the trigger and the selected option on the x-axis in rtl' , async ( ( ) => {
1006
1008
dir . value = 'rtl' ;
1007
1009
1008
1010
trigger . click ( ) ;
1009
1011
fixture . detectChanges ( ) ;
1010
1012
1011
- const triggerRight = trigger . getBoundingClientRect ( ) . right ;
1012
- const firstOptionRight =
1013
- document . querySelector ( '.cdk-overlay-pane md-option' ) . getBoundingClientRect ( ) . right ;
1014
-
1015
- // Each option is 32px wider than the trigger, so it must be adjusted 16px
1016
- // to ensure the text overlaps correctly.
1017
- expect ( firstOptionRight . toFixed ( 2 ) )
1018
- . toEqual ( ( triggerRight + 16 ) . toFixed ( 2 ) ,
1019
- `Expected trigger to align with the selected option on the x-axis in RTL.` ) ;
1020
- } ) ;
1013
+ fixture . whenStable ( ) . then ( ( ) => {
1014
+ const triggerRight = trigger . getBoundingClientRect ( ) . right ;
1015
+ const firstOptionRight =
1016
+ document . querySelector ( '.cdk-overlay-pane md-option' ) . getBoundingClientRect ( ) . right ;
1017
+
1018
+ // Each option is 32px wider than the trigger, so it must be adjusted 16px
1019
+ // to ensure the text overlaps correctly.
1020
+ expect ( firstOptionRight . toFixed ( 2 ) )
1021
+ . toEqual ( ( triggerRight + 16 ) . toFixed ( 2 ) ,
1022
+ `Expected trigger to align with the selected option on the x-axis in RTL.` ) ;
1023
+ } ) ;
1024
+ } ) ) ;
1021
1025
} ) ;
1022
1026
1023
1027
describe ( 'x-axis positioning in multi select mode' , ( ) => {
0 commit comments