fix: ensure focused date is visible if overlay is small (CP: 24) (#4759) (CP: 23.2)

integration/tests/dialog-date-picker.test.js

@@ -5,7 +5,7 @@ import sinon from 'sinon';
 import './not-animated-styles.js';
 import '@vaadin/date-picker';
 import '@vaadin/dialog';
-import { getOverlayContent, open } from '@vaadin/date-picker/test/common.js';
+import { getOverlayContent, open, waitForScrollToFinish } from '@vaadin/date-picker/test/common.js';
 
 describe('date-picker in dialog', () => {
   let dialog, datepicker;
@@ -38,6 +38,7 @@ describe('date-picker in dialog', () => {
       await sendKeys({ press: 'Tab' });
 
       await nextRender();
+      await waitForScrollToFinish(getOverlayContent(datepicker));
 
       // Focus the Today button
       await sendKeys({ press: 'Tab' });
@@ -59,6 +60,7 @@ describe('date-picker in dialog', () => {
       await sendKeys({ press: 'Tab' });
 
       await nextRender();
+      await waitForScrollToFinish(getOverlayContent(datepicker));
 
       const spy = sinon.spy(datepicker.inputElement, 'focus');
 

packages/date-picker/src/vaadin-date-picker-overlay-content.js

@@ -297,6 +297,18 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     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;
+  }
+
   get calendars() {
     return [...this.shadowRoot.querySelectorAll('vaadin-month-calendar')];
   }
@@ -354,7 +366,9 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
    * 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();
   }
 
   /**
@@ -386,23 +400,63 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
    * 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;
   }
 
   _initialPositionChanged(initialPosition) {

packages/date-picker/src/vaadin-infinite-scroller.js

@@ -143,6 +143,18 @@ class InfiniteScroller extends PolymerElement {
     }
   }
 
+  /**
+   * 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();

packages/date-picker/test/overlay.test.js

@@ -17,6 +17,20 @@ function waitUntilScrolledTo(overlay, date, callback) {
   }
 }
 
+async function customizeFixture({ initialPosition, monthScrollerItems, monthScrollerOffset }) {
+  const overlay = fixtureSync(`<vaadin-date-picker-overlay-content></vaadin-date-picker-overlay-content>`);
+  const monthScroller = overlay.$.monthScroller;
+  monthScroller.style.setProperty('--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();
+  await nextRender();
+
+  return overlay;
+}
+
 describe('overlay', () => {
   let overlay;
 
@@ -315,58 +329,123 @@ describe('overlay', () => {
       overlay.$.yearScroller._debouncerUpdateClones.flush();
       expect(getFirstVisibleItem(overlay.$.yearScroller, offset).firstElementChild.textContent).to.contain('2000');
     });
+
+    describe('height(visible area) < height(item)', () => {
+      let overlay, monthScroller;
+
+      beforeEach(async () => {
+        overlay = await customizeFixture({
+          initialPosition: new Date(2021, 1, 1),
+          monthScrollerItems: 0.5,
+          monthScrollerOffset: 0,
+        });
+        monthScroller = overlay.$.monthScroller;
+      });
+
+      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)', () => {
+      let overlay, monthScroller;
+
+      beforeEach(async () => {
+        overlay = await customizeFixture({
+          initialPosition: new Date(2021, 1, 1),
+          monthScrollerItems: 3,
+          monthScrollerOffset: 0,
+        });
+        monthScroller = overlay.$.monthScroller;
+      });
+
+      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(positionOf28th).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);
+      });
+    });
   });
 
   describe('revealDate', () => {
     let overlay, monthScroller;
 
-    async function fixtureOverlayContent({ monthScrollerItems, monthScrollerOffset }) {
-      overlay = fixtureSync(`
-        <vaadin-date-picker-overlay-content></vaadin-date-picker-overlay-content>
-      `);
-      monthScroller = overlay.$.monthScroller;
-      monthScroller.style.setProperty('--vaadin-infinite-scroller-buffer-offset', monthScrollerOffset);
-      monthScroller.style.height = `calc(var(--vaadin-infinite-scroller-item-height) * ${monthScrollerItems})`;
-      overlay.i18n = getDefaultI18n();
-      overlay.$.monthScroller.bufferSize = 3;
-      overlay.$.yearScroller.bufferSize = 3;
-      overlay.initialPosition = new Date(2021, 1, 1);
-      await nextRender();
-    }
-
     describe('height(visible area) < height(item)', () => {
       beforeEach(async () => {
-        await fixtureOverlayContent({
+        overlay = await customizeFixture({
+          initialPosition: new Date(2021, 1, 1),
           monthScrollerItems: 0.5,
           monthScrollerOffset: 0,
         });
+        monthScroller = overlay.$.monthScroller;
       });
 
-      it('should scroll when the month is above the visible area', () => {
-        const position = monthScroller.position;
+      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(async () => {
-        await fixtureOverlayContent({
+        overlay = await customizeFixture({
+          initialPosition: new Date(2021, 1, 1),
           monthScrollerItems: 2,
           monthScrollerOffset: 0,
         });
+        monthScroller = overlay.$.monthScroller;
       });
 
       it('should scroll when the month is above the visible area', () => {
@@ -390,10 +469,12 @@ describe('overlay', () => {
 
     describe('offset', () => {
       beforeEach(async () => {
-        await fixtureOverlayContent({
+        overlay = await customizeFixture({
+          initialPosition: new Date(2021, 1, 1),
           monthScrollerItems: 3,
           monthScrollerOffset: '10%',
         });
+        monthScroller = overlay.$.monthScroller;
       });
 
       it('should scroll when the month is above the visible area', () => {

packages/date-picker/theme/lumo/vaadin-date-picker-overlay-content-styles.js

@@ -36,7 +36,7 @@ registerStyles(
             + 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;