fix(datepicker): ensure that all month/year elements have the expected height (#9893)

The datepicker's calendar uses `md-virtual-repeat` to render itself. The virtual repeater expects that all elements that it has rendered will have a certain height, however this may not be the case if it renders an empty month/year element in the calendar. If this happens (it's usually if the current value and the maximum date are in the same month), the calendar can start jumping while scrolling.

This change adds an empty `<tr>` that will ensure that even empty elements have a height. When the element is compiled, the empty `<tr>` will be overwritten.

Fixes #9863.

Author: crisbeto

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

@@ -70,7 +70,8 @@ describe('md-calendar', function() {
 
   /** Find the `tbody` for a year in the calendar. */
   function findYearElement(year) {
-    var years = element.querySelectorAll('[md-calendar-year-body]');
+    var node = element[0] || element;
+    var years = node.querySelectorAll('[md-calendar-year-body]');
     var yearHeader = year.toString();
     var target;
 
@@ -313,6 +314,31 @@ describe('md-calendar', function() {
         expect(pageScope.myDate).toBeSameDayAs(initialDate);
       });
 
+      it('should ensure that all month elements have a height when the max ' +
+        'date is in the same month as the current date', function() {
+
+        ngElement.remove();
+        var newScope = $rootScope.$new();
+        newScope.myDate = new Date(2016, JUN, 15);
+        newScope.maxDate = new Date(2016, JUN, 20);
+        element = createElement(newScope)[0];
+        applyDateChange();
+
+        var monthWrapper = angular.element(element.querySelector('md-calendar-month'));
+        var scroller = monthWrapper.controller('mdCalendarMonth').calendarScroller;
+
+        scroller.scrollTop -= 50;
+        angular.element(scroller).triggerHandler('scroll');
+
+        var monthElements = $mdUtil.nodesToArray(
+          element.querySelectorAll('[md-calendar-month-body]')
+        );
+
+        expect(monthElements.every(function(currentMonthElement) {
+          return currentMonthElement.offsetHeight > 0;
+        })).toBe(true);
+      });
+
       describe('weeks header', function() {
         it('should display the weeks header in the first row', function() {
           var header = element.querySelector('.md-calendar-day-header tr');
@@ -480,13 +506,39 @@ describe('md-calendar', function() {
         var newScope = $rootScope.$new();
         newScope.minDate = new Date(2014, JUN, 5);
         newScope.myDate = new Date(2014, JUL, 15);
-        element = createElement(newScope)[0];
-        angular.element(element).controller('mdCalendar').setCurrentView('year');
+        element = createElement(newScope);
+        element.controller('mdCalendar').setCurrentView('year');
         applyDateChange();
 
         expect(findYearElement(2014)).not.toBeNull();
         expect(findYearElement(2013)).toBeNull();
       });
+
+      it('should ensure that all year elements have a height when the ' +
+        'current date is in the same month as the max date', function() {
+
+        ngElement.remove();
+        var newScope = $rootScope.$new();
+        newScope.myDate = new Date(2016, JUN, 15);
+        newScope.maxDate = new Date(2016, JUN, 20);
+        element = createElement(newScope);
+        element.controller('mdCalendar').setCurrentView('year');
+        applyDateChange();
+
+        var yearWrapper = angular.element(element[0].querySelector('md-calendar-year'));
+        var scroller = yearWrapper.controller('mdCalendarYear').calendarScroller;
+
+        scroller.scrollTop -= 50;
+        angular.element(scroller).triggerHandler('scroll');
+
+        var yearElements = $mdUtil.nodesToArray(
+          element[0].querySelectorAll('[md-calendar-year-body]')
+        );
+
+        expect(yearElements.every(function(currentYearElement) {
+          return currentYearElement.offsetHeight > 0;
+        })).toBe(true);
+      });
     });
 
     it('should have ids for date elements unique to the directive instance', function() {

src/components/datepicker/js/calendarMonth.js

@@ -32,7 +32,13 @@
                   'md-month-offset="$index" ' +
                   'class="md-calendar-month" ' +
                   'md-start-index="monthCtrl.getSelectedMonthIndex()" ' +
-                  'md-item-size="' + TBODY_HEIGHT + '"></tbody>' +
+                  'md-item-size="' + TBODY_HEIGHT + '">' +
+
+                // The <tr> ensures that the <tbody> will always have the
+                // proper height, even if it's empty. If it's content is
+                // compiled, the <tr> will be overwritten.
+                '<tr aria-hidden="true" style="height:' + TBODY_HEIGHT + 'px;"></tr>' +
+              '</tbody>' +
             '</table>' +
           '</md-virtual-repeat-container>' +
         '</div>',

src/components/datepicker/js/calendarYear.js

@@ -23,7 +23,11 @@
                   'md-virtual-repeat="i in yearCtrl.items" ' +
                   'md-year-offset="$index" class="md-calendar-year" ' +
                   'md-start-index="yearCtrl.getFocusedYearIndex()" ' +
-                  'md-item-size="' + TBODY_HEIGHT + '"></tbody>' +
+                  'md-item-size="' + TBODY_HEIGHT + '">' +
+                // The <tr> ensures that the <tbody> will have the proper
+                // height, even though it may be empty.
+                '<tr aria-hidden="true" style="height:' + TBODY_HEIGHT + 'px;"></tr>' +
+              '</tbody>' +
             '</table>' +
           '</md-virtual-repeat-container>' +
         '</div>',