fix(sidenav): allow more time before triggering a resize of the children (#9809)

Currently the sidenav triggers the resize handlers whenever it is opened, however in most cases the element heights haven't been computed properly, causing wrong measurements. This PR moves the event trigger to an `rAF` call in order to give the browser more time to calculate the dimensions.

Fixes #9745.

Author: crisbeto

src/components/sidenav/sidenav.js

@@ -243,8 +243,8 @@ function SidenavFocusDirective() {
  *   - `<md-sidenav md-is-locked-open="$mdMedia('min-width: 1000px')"></md-sidenav>`
  *   - `<md-sidenav md-is-locked-open="$mdMedia('sm')"></md-sidenav>` (locks open on small screens)
  */
-function SidenavDirective($mdMedia, $mdUtil, $mdConstant, $mdTheming, $mdInteraction, $animate, $compile,
-                          $parse, $log, $q, $document, $window) {
+function SidenavDirective($mdMedia, $mdUtil, $mdConstant, $mdTheming, $mdInteraction, $animate,
+                          $compile, $parse, $log, $q, $document, $window, $$rAF) {
   return {
     restrict: 'E',
     scope: {
@@ -368,8 +368,12 @@ function SidenavDirective($mdMedia, $mdUtil, $mdConstant, $mdTheming, $mdInterac
       ]).then(function() {
         // Perform focus when animations are ALL done...
         if (scope.isOpen) {
-          // Notifies child components that the sidenav was opened.
-          ngWindow.triggerHandler('resize');
+          $$rAF(function() {
+            // Notifies child components that the sidenav was opened. Should wait
+            // a frame in order to allow for the element height to be computed.
+            ngWindow.triggerHandler('resize');
+          });
+
           focusEl && focusEl.focus();
         }
 

src/components/sidenav/sidenav.spec.js

@@ -165,15 +165,16 @@ describe('mdSidenav', function() {
     });
 
     it('should trigger a resize event when opening',
-      inject(function($rootScope, $material, $window) {
+      inject(function($rootScope, $animate, $$rAF, $window) {
         var el = setup('md-is-open="show"');
         var obj = { callback: function() {} };
 
         spyOn(obj, 'callback');
         angular.element($window).on('resize', obj.callback);
 
         $rootScope.$apply('show = true');
-        $material.flushOutstandingAnimations();
+        $animate.flush();
+        $$rAF.flush();
 
         expect(obj.callback).toHaveBeenCalled();
         angular.element($window).off('resize', obj.callback);