fix: ensure focused date is visible if overlay is small (#809)

* fix: ensure focused date is visible if overlay is small

* force update scroller when opening the overlay

* reduce month scroll offset

* adapt visual test to scroll offset style changes

src/vaadin-date-picker-overlay-content.html

@@ -303,6 +303,18 @@
           return this.getAttribute('dir') === 'rtl';
         }
 
+        /**
+         * Whether to scroll to a sub-month position when scrolling to a date.
+         * This is active if the month scroller is not large enough to fit a
+         * full month. In that case we want to scroll to a position between
+         * two months in order to have the focused date in the visible area.
+         * @returns {boolean} whether to use sub-month scrolling
+         * @private
+         */
+        get __useSubMonthScrolling() {
+          return this.$.monthScroller.clientHeight < this.$.monthScroller.itemHeight + this.$.monthScroller.bufferOffset;
+        }
+
         ready() {
           super.ready();
           this.setAttribute('tabindex', 0);
@@ -364,7 +376,9 @@
          * Scrolls the list to the given Date.
          */
         scrollToDate(date, animate) {
-          this._scrollToPosition(this._differenceInMonths(date, this._originDate), animate);
+          const offset = this.__useSubMonthScrolling ? this._calculateWeekScrollOffset(date) : 0;
+          this._scrollToPosition(this._differenceInMonths(date, this._originDate) + offset, animate);
+          this.$.monthScroller.forceUpdate();
         }
 
         _focusedDateChanged(focusedDate) {
@@ -385,23 +399,63 @@
          * Scrolls the month and year scrollers enough to reveal the given date.
          */
         revealDate(date, animate = true) {
-          if (date) {
-            const diff = this._differenceInMonths(date, this._originDate);
-            const scrolledAboveViewport = this.$.monthScroller.position > diff;
-
-            const visibleArea = Math.max(
-              this.$.monthScroller.itemHeight,
-              this.$.monthScroller.clientHeight - this.$.monthScroller.bufferOffset * 2
-            );
-            const visibleItems = visibleArea / this.$.monthScroller.itemHeight;
-            const scrolledBelowViewport = this.$.monthScroller.position + visibleItems - 1 < diff;
-
-            if (scrolledAboveViewport) {
-              this._scrollToPosition(diff, animate);
-            } else if (scrolledBelowViewport) {
-              this._scrollToPosition(diff - visibleItems + 1, animate);
+          if (!date) {
+            return;
+          }
+          const diff = this._differenceInMonths(date, this._originDate);
+          // If scroll area does not fit the full month, then always scroll with an offset to
+          // approximately display the week of the date
+          if (this.__useSubMonthScrolling) {
+            const offset = this._calculateWeekScrollOffset(date);
+            this._scrollToPosition(diff + offset, animate);
+            return;
+          }
+
+          // Otherwise determine if we need to scroll to make the month of the date visible
+          const scrolledAboveViewport = this.$.monthScroller.position > diff;
+
+          const visibleArea = Math.max(
+            this.$.monthScroller.itemHeight,
+            this.$.monthScroller.clientHeight - this.$.monthScroller.bufferOffset * 2
+          );
+          const visibleItems = visibleArea / this.$.monthScroller.itemHeight;
+          const scrolledBelowViewport = this.$.monthScroller.position + visibleItems - 1 < diff;
+
+          if (scrolledAboveViewport) {
+            this._scrollToPosition(diff, animate);
+          } else if (scrolledBelowViewport) {
+            this._scrollToPosition(diff - visibleItems + 1, animate);
+          }
+        }
+
+        /**
+         * Calculates an offset to be added to the month scroll position
+         * when using sub-month scrolling, in order ensure that the week
+         * that the date is in is visible even for small scroll areas.
+         * As the month scroller uses a month as minimal scroll unit
+         * (a value of `1` equals one month), we can not exactly identify
+         * the position of a specific week. This is a best effort
+         * implementation based on manual testing.
+         * @param date the date for which to calculate the offset
+         * @returns {number} the offset
+         * @private
+         */
+        _calculateWeekScrollOffset(date) {
+          // Get first day of month
+          const temp = new Date(0, 0);
+          temp.setFullYear(date.getFullYear());
+          temp.setMonth(date.getMonth());
+          temp.setDate(1);
+          // Determine week (=row index) of date within the month
+          let week = 0;
+          while (temp.getDate() < date.getDate()) {
+            temp.setDate(temp.getDate() + 1);
+            if (temp.getDay() === this.i18n.firstDayOfWeek) {
+              week += 1;
             }
           }
+          // Calculate magic number that approximately keeps the week visible
+          return week / 6;
         }
 
         _onOverlayFocus() {

src/vaadin-infinite-scroller.html

@@ -145,6 +145,18 @@
         }
       }
 
+      /**
+       * Force the scroller to update clones after a reset, without
+       * waiting for the debouncer to resolve.
+       */
+      forceUpdate() {
+        if (this._debouncerUpdateClones) {
+          this._buffers[0].updated = this._buffers[1].updated = false;
+          this._updateClones();
+          this._debouncerUpdateClones.cancel();
+        }
+      }
+
       _activated(active) {
         if (active && !this._initialized) {
           this._createPool();

test/overlay.html

@@ -46,6 +46,19 @@
       }
     }
 
+    function customizeFixture({initialPosition, monthScrollerItems, monthScrollerOffset}) {
+      const overlay = fixture('overlay');
+      const monthScroller = overlay.$.monthScroller;
+      monthScroller.style.setProperty('--vaadin-infinite-scroller-buffer-offset', monthScrollerOffset);
+      monthScroller.updateStyles({'--vaadin-infinite-scroller-buffer-offset': monthScrollerOffset});
+      monthScroller.style.height = `${270 * monthScrollerItems}px`;
+      overlay.i18n = getDefaultI18n();
+      overlay.$.monthScroller.bufferSize = 3;
+      overlay.$.yearScroller.bufferSize = 3;
+      overlay.initialPosition = initialPosition || new Date();
+      return overlay;
+    }
+
     describe('vaadin-date-picker-overlay', () => {
       var overlay;
 
@@ -411,54 +424,55 @@
     describe('revealDate', () => {
       let overlay, monthScroller;
 
-      function fixtureOverlayContent({monthScrollerItems, monthScrollerOffset}, done) {
-        overlay = fixture('overlay');
-        monthScroller = overlay.$.monthScroller;
-        monthScroller.style.setProperty('--vaadin-infinite-scroller-buffer-offset', monthScrollerOffset);
-        monthScroller.updateStyles({'--vaadin-infinite-scroller-buffer-offset': monthScrollerOffset});
-        monthScroller.style.height = `${270 * monthScrollerItems}px`;
-        overlay.i18n = getDefaultI18n();
-        overlay.$.monthScroller.bufferSize = 3;
-        overlay.$.yearScroller.bufferSize = 3;
-        overlay.initialPosition = new Date(2021, 1, 1);
-        setTimeout(() => {
-          Polymer.RenderStatus.afterNextRender(overlay, done);
-        }, 1);
-      }
-
       describe('height(visible area) < height(item)', () => {
         beforeEach((done) => {
-          fixtureOverlayContent({
+          overlay = customizeFixture({
+            initialPosition: new Date(2021, 1, 1),
             monthScrollerItems: 0.5,
             monthScrollerOffset: 0
-          }, done);
-        });
-
-        it('should scroll when the month is above the visible area', () => {
-          const position = monthScroller.position;
+          });
+          monthScroller = overlay.$.monthScroller;
+          setTimeout(() => {
+            Polymer.RenderStatus.afterNextRender(overlay, done);
+          }, 1);
+        });
+
+        it('should scroll to a position that approximately shows the week the date is in', () => {
+          // Starting on first of February
+          const initialPosition = monthScroller.position;
+          // Scroll to 15th
+          overlay.revealDate(new Date(2021, 1, 15), false);
+          const positionOf15th = monthScroller.position;
+          expect(positionOf15th).to.be.greaterThan(initialPosition);
+          expect(positionOf15th).to.be.lessThan(initialPosition + 1);
+          // Scroll to 28th
+          overlay.revealDate(new Date(2021, 1, 28), false);
+          const positionOf28th = monthScroller.position;
+          expect(positionOf28th).to.be.greaterThan(initialPosition);
+          expect(positionOf28th).to.be.greaterThan(positionOf15th);
+          expect(positionOf28th).to.be.lessThan(initialPosition + 1);
+          // Scroll to first of previous month
           overlay.revealDate(new Date(2021, 0, 1), false);
-          expect(monthScroller.position).to.equal(position - 1);
-        });
-
-        it('should not scroll when the month is the same', () => {
-          const position = monthScroller.position;
-          overlay.revealDate(new Date(2021, 1, 10), false);
-          expect(monthScroller.position).to.equal(position);
-        });
-
-        it('should scroll when the month is below the visible area', () => {
-          const position = monthScroller.position;
+          const firstOfPreviousMonthPosition = monthScroller.position;
+          expect(firstOfPreviousMonthPosition).to.equal(initialPosition - 1);
+          // Scroll to first of next month
           overlay.revealDate(new Date(2021, 2, 1), false);
-          expect(monthScroller.position).to.equal(position + 1);
+          const firstOfNextMonthPosition = monthScroller.position;
+          expect(firstOfNextMonthPosition).to.equal(initialPosition + 1);
         });
       });
 
       describe('height(visible area) > height(item)', () => {
         beforeEach((done) => {
-          fixtureOverlayContent({
+          overlay = customizeFixture({
+            initialPosition: new Date(2021, 1, 1),
             monthScrollerItems: 2,
             monthScrollerOffset: 0
-          }, done);
+          });
+          monthScroller = overlay.$.monthScroller;
+          setTimeout(() => {
+            Polymer.RenderStatus.afterNextRender(overlay, done);
+          }, 1);
         });
 
         it('should scroll when the month is above the visible area', () => {
@@ -482,10 +496,15 @@
 
       describe('offset', () => {
         beforeEach((done) => {
-          fixtureOverlayContent({
+          overlay = customizeFixture({
+            initialPosition: new Date(2021, 1, 1),
             monthScrollerItems: 3,
             monthScrollerOffset: '10%'
-          }, done);
+          });
+          monthScroller = overlay.$.monthScroller;
+          setTimeout(() => {
+            Polymer.RenderStatus.afterNextRender(overlay, done);
+          }, 1);
         });
 
         it('should scroll when the month is above the visible area', () => {
@@ -507,6 +526,81 @@
         });
       });
     });
+
+    describe('scrollToDate', () => {
+      let overlay, monthScroller;
+
+      describe('height(visible area) < height(item)', () => {
+        beforeEach((done) => {
+          overlay = customizeFixture({
+            initialPosition: new Date(2021, 1, 1),
+            monthScrollerItems: 0.5,
+            monthScrollerOffset: 0
+          });
+          monthScroller = overlay.$.monthScroller;
+          setTimeout(() => {
+            Polymer.RenderStatus.afterNextRender(overlay, done);
+          }, 1);
+        });
+
+        it('should scroll to a sub-month position that approximately shows the week the date is in', () => {
+          const initialPosition = monthScroller.position;
+          // Scroll to 15th
+          overlay.scrollToDate(new Date(2021, 1, 15), false);
+          const positionOf15th = monthScroller.position;
+          expect(positionOf15th).to.be.greaterThan(initialPosition);
+          expect(positionOf15th).to.be.lessThan(initialPosition + 1);
+          // Scroll to 28th
+          overlay.scrollToDate(new Date(2021, 1, 28), false);
+          const positionOf28th = monthScroller.position;
+          expect(positionOf28th).to.be.greaterThan(initialPosition);
+          expect(positionOf28th).to.be.greaterThan(positionOf15th);
+          expect(positionOf28th).to.be.lessThan(initialPosition + 1);
+          // Scroll to first of previous month
+          overlay.scrollToDate(new Date(2021, 0, 1), false);
+          const firstOfPreviousMonthPosition = monthScroller.position;
+          expect(firstOfPreviousMonthPosition).to.equal(initialPosition - 1);
+          // Scroll to first of next month
+          overlay.scrollToDate(new Date(2021, 2, 1), false);
+          const firstOfNextMonthPosition = monthScroller.position;
+          expect(firstOfNextMonthPosition).to.equal(initialPosition + 1);
+        });
+      });
+
+      describe('height(visible area) > height(item)', () => {
+        beforeEach((done) => {
+          overlay = customizeFixture({
+            initialPosition: new Date(2021, 1, 1),
+            monthScrollerItems: 3,
+            monthScrollerOffset: 0
+          });
+          monthScroller = overlay.$.monthScroller;
+          setTimeout(() => {
+            Polymer.RenderStatus.afterNextRender(overlay, done);
+          }, 1);
+        });
+
+        it('should always scroll to the exact position of the month that the date is in', () => {
+          const initialPosition = monthScroller.position;
+          // Scroll to 15th
+          overlay.scrollToDate(new Date(2021, 1, 15), false);
+          const positionOf15th = monthScroller.position;
+          expect(positionOf15th).to.equal(initialPosition);
+          // Scroll to 28th
+          overlay.scrollToDate(new Date(2021, 1, 28), false);
+          const positionOf28th = monthScroller.position;
+          expect(positionOf15th).to.equal(initialPosition);
+          // Scroll to first of previous month
+          overlay.scrollToDate(new Date(2021, 0, 1), false);
+          const firstOfPreviousMonthPosition = monthScroller.position;
+          expect(firstOfPreviousMonthPosition).to.equal(initialPosition - 1);
+          // Scroll to first of next month
+          overlay.scrollToDate(new Date(2021, 2, 1), false);
+          const firstOfNextMonthPosition = monthScroller.position;
+          expect(firstOfNextMonthPosition).to.equal(initialPosition + 1);
+        });
+      });
+    });
   </script>
 
 </body>

theme/lumo/vaadin-date-picker-overlay-content-styles.html

@@ -36,7 +36,7 @@
             + var(--lumo-size-m) * 6
             + var(--lumo-space-s)
           );
-        --vaadin-infinite-scroller-buffer-offset: 20%;
+        --vaadin-infinite-scroller-buffer-offset: 10%;
         -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
         mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
         position: relative;