fix(virtualRepeat): fix datepicker scroll to wrong current date (#10537)

Fixes #10144

Author: ernsheong

src/components/datepicker/js/calendar.spec.js

@@ -26,6 +26,9 @@ describe('md-calendar', function() {
     if (activeViewController) {
       angular.element(activeViewController.calendarScroller).triggerHandler('scroll');
     }
+
+    // Need this to handle the nextTick when setting first scroll.
+    $timeout.flush();
   }
 
   /** Extracts text as an array (one element per cell) from a tr element. */

src/components/virtualRepeat/virtual-repeater.js

@@ -522,6 +522,7 @@ function VirtualRepeatController($scope, $element, $attrs, $browser, $document,
   this.$attrs = $attrs;
   this.$browser = $browser;
   this.$document = $document;
+  this.$mdUtil = $mdUtil;
   this.$rootScope = $rootScope;
   this.$$rAF = $$rAF;
 
@@ -761,16 +762,6 @@ VirtualRepeatController.prototype.virtualRepeatUpdate_ = function(items, oldItem
     this.container.setScrollSize(itemsLength * this.itemSize);
   }
 
-  var cleanupFirstRender = false, firstRenderStartIndex;
-  if (this.isFirstRender) {
-    cleanupFirstRender = true;
-    this.isFirstRender = false;
-    firstRenderStartIndex = this.$attrs.mdStartIndex ?
-      this.$scope.$eval(this.$attrs.mdStartIndex) :
-      this.container.topIndex;
-    this.container.scrollToIndex(firstRenderStartIndex);
-  }
-
   // Detach and pool any blocks that are no longer in the viewport.
   Object.keys(this.blocks).forEach(function(blockIndex) {
     var index = parseInt(blockIndex, 10);
@@ -822,16 +813,25 @@ VirtualRepeatController.prototype.virtualRepeatUpdate_ = function(items, oldItem
         this.blocks[maxIndex] && this.blocks[maxIndex].element[0].nextSibling);
   }
 
-  // DOM manipulation may have altered scroll, so scroll again
-  if (cleanupFirstRender) {
-    this.container.scrollToIndex(firstRenderStartIndex);
-  }
   // Restore $$checkUrlChange.
   this.$browser.$$checkUrlChange = this.browserCheckUrlChange;
 
   this.startIndex = this.newStartIndex;
   this.endIndex = this.newEndIndex;
 
+  if (this.isFirstRender) {
+    this.isFirstRender = false;
+    var firstRenderStartIndex = this.$attrs.mdStartIndex ?
+      this.$scope.$eval(this.$attrs.mdStartIndex) :
+      this.container.topIndex;
+
+    // The first call to virtualRepeatUpdate_ may not be when the virtual repeater is ready.
+    // Introduce a slight delay so that the update happens when it is actually ready.
+    this.$mdUtil.nextTick(function() {
+      this.container.scrollToIndex(firstRenderStartIndex);
+    }.bind(this));
+  }
+
   this.isVirtualRepeatUpdating_ = false;
 };
 

src/components/virtualRepeat/virtual-repeater.spec.js

@@ -27,16 +27,16 @@ describe('<md-virtual-repeat>', function() {
       '     style="height: 10px; width: 10px; box-sizing: border-box;">' +
       '       {{i}} {{$index}}' +
       '</div>';
-  var container, repeater, component, $$rAF, $compile, $document, $mdUtil, $window, scope,
-      scroller, sizer, offsetter;
+  var container, repeater, component, $$rAF, $compile, $document, $mdUtil, $timeout,
+      $window, scope, scroller, sizer, offsetter;
 
   var NUM_ITEMS = 110,
       VERTICAL_PX = 100,
       HORIZONTAL_PX = 150,
       ITEM_SIZE = 10;
 
   beforeEach(inject(function(
-      _$$rAF_, _$compile_, _$document_, _$mdUtil_, $rootScope, _$window_, _$material_) {
+      _$$rAF_, _$compile_, _$document_, _$mdUtil_, $rootScope, _$timeout_, _$window_, _$material_) {
     repeater = angular.element(REPEATER_HTML);
     container = angular.element(CONTAINER_HTML).append(repeater);
     component = null;
@@ -45,6 +45,7 @@ describe('<md-virtual-repeat>', function() {
     $mdUtil = _$mdUtil_;
     $compile = _$compile_;
     $document = _$document_;
+    $timeout = _$timeout_;
     $window = _$window_;
     scope = $rootScope.$new();
     scope.startIndex = 0;
@@ -374,6 +375,7 @@ describe('<md-virtual-repeat>', function() {
     scope.items = createItems(200);
     createRepeater();
     scope.$apply();
+    $timeout.flush();
     $$rAF.flush();
 
     expect(scroller[0].scrollTop).toBe(10 * ITEM_SIZE);
@@ -597,6 +599,7 @@ describe('<md-virtual-repeat>', function() {
     scope.items = createItems(200);
     createRepeater();
     scope.$apply();
+    $timeout.flush();
 
     expect(scroller[0].scrollTop).toBe(10 * ITEM_SIZE);
   });