fix: force scroller update after revealing a date (#8217)

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

@@ -571,6 +571,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
 
       if (!animate) {
         this._monthScroller.position = targetPosition;
+        this._monthScroller.forceUpdate();
         this._targetPosition = undefined;
         this._repositionYearScroller();
         this.__tryFocusDate();
@@ -626,6 +627,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
           );
 
           this._monthScroller.position = this._targetPosition;
+          this._monthScroller.forceUpdate();
           this._targetPosition = undefined;
 
           revealResolve();

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

@@ -3,6 +3,7 @@
  * Copyright (c) 2016 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { flush } from '@polymer/polymer/lib/utils/flush.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
@@ -205,11 +206,17 @@ export class InfiniteScroller extends HTMLElement {
    * waiting for the debouncer to resolve.
    */
   forceUpdate() {
+    if (this._debouncerScrollFinish) {
+      this._debouncerScrollFinish.flush();
+    }
+
     if (this._debouncerUpdateClones) {
       this._buffers[0].updated = this._buffers[1].updated = false;
       this._updateClones();
       this._debouncerUpdateClones.cancel();
     }
+
+    flush();
   }
 
   /**

packages/date-picker/test/custom-input.test.js

@@ -68,9 +68,8 @@ describe('custom input', () => {
       });
 
       it('should propagate theme attribute to month calendar', async () => {
-        const overlayContent = datePicker._overlayContent;
-        await waitForScrollToFinish(overlayContent);
-        const monthCalendar = overlayContent.querySelector('vaadin-month-calendar');
+        await waitForScrollToFinish(datePicker);
+        const monthCalendar = datePicker._overlayContent.querySelector('vaadin-month-calendar');
         expect(monthCalendar.getAttribute('theme')).to.equal('foo');
       });
     });

packages/date-picker/test/dropdown.common.js

@@ -11,7 +11,7 @@ import {
 } from '@vaadin/testing-helpers';
 import { resetMouse, sendKeys, sendMouse } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import { getFocusedCell, monthsEqual, open, waitForOverlayRender } from './helpers.js';
+import { getFocusableCell, monthsEqual, open, waitForOverlayRender } from './helpers.js';
 
 describe('dropdown', () => {
   let datePicker, input, overlay;
@@ -237,7 +237,7 @@ describe('dropdown', () => {
 
   describe('date tap', () => {
     function dateTap() {
-      const date = getFocusedCell(datePicker._overlayContent);
+      const date = getFocusableCell(datePicker);
       mousedown(date);
       date.focus();
       date.click();

packages/date-picker/test/events.common.js

@@ -27,7 +27,7 @@ describe('events', () => {
 
     it('should not be fired on programmatic value change when having user input', async () => {
       await sendKeys({ type: '1/2/2000' });
-      await waitForScrollToFinish(datePicker._overlayContent);
+      await waitForScrollToFinish(datePicker);
       datePicker.value = '2000-01-01';
       await close(datePicker);
       expect(changeSpy.called).to.be.false;
@@ -52,7 +52,7 @@ describe('events', () => {
       describe('with user input', () => {
         beforeEach(async () => {
           await sendKeys({ type: '1/1/2022' });
-          await waitForScrollToFinish(datePicker._overlayContent);
+          await waitForScrollToFinish(datePicker);
           hasInputValueChangedSpy.resetHistory();
         });
 
@@ -67,7 +67,7 @@ describe('events', () => {
     describe('with value', () => {
       beforeEach(async () => {
         await sendKeys({ type: '1/1/2022' });
-        await waitForScrollToFinish(datePicker._overlayContent);
+        await waitForScrollToFinish(datePicker);
         await sendKeys({ press: 'Enter' });
         valueChangedSpy.resetHistory();
         hasInputValueChangedSpy.resetHistory();

packages/date-picker/test/fullscreen.common.js

@@ -2,7 +2,7 @@ import { expect } from '@vaadin/chai-plugins';
 import { aTimeout, fixtureSync, nextRender, nextUpdate, outsideClick, tabKeyDown, tap } from '@vaadin/testing-helpers';
 import { sendKeys, setViewport } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import { getFocusedCell, open, touchTap, waitForOverlayRender } from './helpers.js';
+import { getFocusableCell, open, touchTap, waitForOverlayRender } from './helpers.js';
 
 describe('fullscreen mode', () => {
   let datePicker, input, overlay, width, height;
@@ -74,7 +74,7 @@ describe('fullscreen mode', () => {
 
       it('should focus date element when opening overlay', async () => {
         await open(datePicker);
-        const cell = getFocusedCell(datePicker._overlayContent);
+        const cell = getFocusableCell(datePicker);
         expect(cell).to.be.instanceOf(HTMLTableCellElement);
         expect(cell.getAttribute('part')).to.include('today');
       });
@@ -166,7 +166,7 @@ describe('fullscreen mode', () => {
     });
 
     it('should move focus to date cell button on Cancel button Tab', async () => {
-      const cell = getFocusedCell(overlayContent);
+      const cell = getFocusableCell(datePicker);
       const spy = sinon.spy(cell, 'focus');
 
       // Move focus to Cancel button

packages/date-picker/test/helpers.js

@@ -1,6 +1,7 @@
 import { fire, listenOnce, makeSoloTouchEvent, nextRender } from '@vaadin/testing-helpers';
 import { flush } from '@polymer/polymer/lib/utils/flush.js';
 import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
+import { isElementFocused } from '@vaadin/a11y-base/src/focus-utils.js';
 
 export function activateScroller(scroller) {
   scroller.active = true;
@@ -108,24 +109,38 @@ export function getFirstVisibleItem(scroller, bufferOffset = 0) {
   });
 }
 
-export function getFocusedMonth(overlayContent) {
-  const months = [...overlayContent.querySelectorAll('vaadin-month-calendar')];
-  return months.find((month) => {
-    return !!month.shadowRoot.querySelector('[part~="focused"]');
+/**
+ * @param {HTMLElement} root vaadin-date-picker or vaadin-date-picker-overlay-content
+ */
+export function getFocusableCell(root) {
+  const overlayContent = root._overlayContent ?? root;
+  const focusableMonth = [...overlayContent.querySelectorAll('vaadin-month-calendar')].find((month) => {
+    return !!month.shadowRoot.querySelector('[tabindex="0"]');
   });
+
+  if (focusableMonth) {
+    return focusableMonth.shadowRoot.querySelector('[tabindex="0"]');
+  }
 }
 
-export function getFocusedCell(overlayContent) {
-  const focusedMonth = getFocusedMonth(overlayContent);
-  return focusedMonth.shadowRoot.querySelector('[part~="focused"]');
+/**
+ * @param {HTMLElement} root vaadin-date-picker or vaadin-date-picker-overlay-content
+ */
+export function getFocusedCell(root) {
+  const focusableCell = getFocusableCell(root);
+  if (focusableCell && isElementFocused(focusableCell)) {
+    return focusableCell;
+  }
 }
 
 /**
  * Waits for the scroll to finish in the date-picker overlay content.
  *
- * @param {HTMLElement} overlayContent
+ * @param {HTMLElement} root vaadin-date-picker or vaadin-date-picker-overlay-content
  */
-export async function waitForScrollToFinish(overlayContent) {
+export async function waitForScrollToFinish(root) {
+  const overlayContent = root._overlayContent ?? root;
+
   if (overlayContent._revealPromise) {
     // The overlay content is scrolling.
     await overlayContent._revealPromise;

packages/date-picker/test/keyboard-input.common.js

@@ -65,8 +65,7 @@ describe('keyboard', () => {
     // FIXME: flaky test often failing locally due to scroll animation
     it.skip('should display focused date while overlay focused', async () => {
       await sendKeys({ type: '1/2/2000' });
-      const content = datePicker._overlayContent;
-      await waitForScrollToFinish(content);
+      await waitForScrollToFinish(datePicker);
 
       // Move focus to the calendar
       await sendKeys({ press: 'Tab' });
@@ -212,7 +211,7 @@ describe('keyboard', () => {
       // Move focus to the calendar
       await sendKeys({ press: 'Tab' });
       await waitForOverlayRender();
-      const cell = getFocusedCell(overlayContent);
+      const cell = getFocusedCell(datePicker);
       const spy = sinon.spy(input, 'focus');
       tap(cell);
       expect(spy.calledOnce).to.be.true;
@@ -284,9 +283,9 @@ describe('keyboard', () => {
         // Move focus to the calendar
         await sendKeys({ press: 'Tab' });
 
-        await waitForScrollToFinish(overlayContent);
+        await waitForScrollToFinish(datePicker);
 
-        const cell = getFocusedCell(overlayContent);
+        const cell = getFocusedCell(datePicker);
         expect(cell).to.be.instanceOf(HTMLTableCellElement);
         expect(cell.getAttribute('part')).to.contain('today');
       });
@@ -300,9 +299,9 @@ describe('keyboard', () => {
         await sendKeys({ press: 'Tab' });
         await sendKeys({ up: 'Shift' });
 
-        await waitForScrollToFinish(overlayContent);
+        await waitForScrollToFinish(datePicker);
 
-        const cell = getFocusedCell(overlayContent);
+        const cell = getFocusedCell(datePicker);
         expect(cell).to.be.instanceOf(HTMLTableCellElement);
         expect(cell.getAttribute('part')).to.contain('today');
       });

packages/date-picker/test/keyboard-navigation.common.js

@@ -31,7 +31,7 @@ describe('keyboard navigation', () => {
         // Move focus to the calendar
         await sendKeys({ press: 'Tab' });
 
-        const cell = getFocusedCell(datePicker._overlayContent);
+        const cell = getFocusedCell(datePicker);
         expect(cell.date).to.eql(new Date(today.getFullYear(), today.getMonth(), today.getDate()));
       });
 
@@ -47,7 +47,7 @@ describe('keyboard navigation', () => {
         // Move focus to the calendar
         await sendKeys({ press: 'Tab' });
 
-        const cell = getFocusedCell(datePicker._overlayContent);
+        const cell = getFocusedCell(datePicker);
         expect(cell.date).to.eql(new Date(today.getFullYear(), today.getMonth(), today.getDate()));
       });
     });
@@ -66,7 +66,7 @@ describe('keyboard navigation', () => {
         // Move focus to the calendar
         await sendKeys({ press: 'Tab' });
 
-        const cell = getFocusedCell(datePicker._overlayContent);
+        const cell = getFocusedCell(datePicker);
         expect(cell.date).to.eql(new Date(2001, 0, 1));
       });
 
@@ -101,7 +101,7 @@ describe('keyboard navigation', () => {
         // Move focus to the calendar
         await sendKeys({ press: 'Tab' });
 
-        const cell = getFocusedCell(datePicker._overlayContent);
+        const cell = getFocusedCell(datePicker);
         expect(cell.date).to.eql(new Date(2001, 0, 1));
       });
 
@@ -115,7 +115,7 @@ describe('keyboard navigation', () => {
         // Move focus to the calendar
         await sendKeys({ press: 'Tab' });
 
-        const cell = getFocusedCell(datePicker._overlayContent);
+        const cell = getFocusedCell(datePicker);
         expect(cell.date).to.eql(new Date(2001, 0, 1));
       });
     });
@@ -142,20 +142,20 @@ describe('keyboard navigation', () => {
 
         // Move focus inside the dropdown to the typed date.
         await sendKeys({ press: 'ArrowDown' });
-        await waitForScrollToFinish(datePicker._overlayContent);
+        await waitForScrollToFinish(datePicker);
 
         // Move focus to the previous week and it should instead move to the min date
         await sendKeys({ press: 'ArrowUp' });
-        await waitForScrollToFinish(datePicker._overlayContent);
+        await waitForScrollToFinish(datePicker);
 
-        let cell = getFocusedCell(datePicker._overlayContent);
+        let cell = getFocusedCell(datePicker);
         expect(cell.date).to.eql(new Date(2010, 0, 1));
 
         // Attempt to move focus to the previous week and it should stay on the min date
         await sendKeys({ press: 'ArrowUp' });
-        await waitForScrollToFinish(datePicker._overlayContent);
+        await waitForScrollToFinish(datePicker);
 
-        cell = getFocusedCell(datePicker._overlayContent);
+        cell = getFocusedCell(datePicker);
         expect(cell.date).to.eql(new Date(2010, 0, 1));
       });
 
@@ -164,20 +164,20 @@ describe('keyboard navigation', () => {
 
         // Move focus inside the dropdown to the typed date.
         await sendKeys({ press: 'ArrowDown' });
-        await waitForScrollToFinish(datePicker._overlayContent);
+        await waitForScrollToFinish(datePicker);
 
         // Move focus to the next week and it should instead move to the max date
         await sendKeys({ press: 'ArrowDown' });
-        await waitForScrollToFinish(datePicker._overlayContent);
+        await waitForScrollToFinish(datePicker);
 
-        let cell = getFocusedCell(datePicker._overlayContent);
+        let cell = getFocusedCell(datePicker);
         expect(cell.date).to.eql(new Date(2010, 0, 31));
 
         // Attempt to move focus to the next week and it should stay on the max date
         await sendKeys({ press: 'ArrowDown' });
-        await waitForScrollToFinish(datePicker._overlayContent);
+        await waitForScrollToFinish(datePicker);
 
-        cell = getFocusedCell(datePicker._overlayContent);
+        cell = getFocusedCell(datePicker);
         expect(cell.date).to.eql(new Date(2010, 0, 31));
       });
 
@@ -186,13 +186,13 @@ describe('keyboard navigation', () => {
 
         // Move focus inside the dropdown to the typed date.
         await sendKeys({ press: 'ArrowDown' });
-        await waitForScrollToFinish(datePicker._overlayContent);
+        await waitForScrollToFinish(datePicker);
 
         // Move focus to a disabled date
         await sendKeys({ press: 'ArrowRight' });
-        await waitForScrollToFinish(datePicker._overlayContent);
+        await waitForScrollToFinish(datePicker);
 
-        const cell = getFocusedCell(datePicker._overlayContent);
+        const cell = getFocusedCell(datePicker);
         expect(cell.date).to.eql(new Date(2010, 0, 29));
       });
 
@@ -202,7 +202,7 @@ describe('keyboard navigation', () => {
         // Move focus to a disabled date
         await sendKeys({ press: 'ArrowDown' });
         await sendKeys({ press: 'ArrowRight' });
-        await waitForScrollToFinish(datePicker._overlayContent);
+        await waitForScrollToFinish(datePicker);
 
         await sendKeys({ press: 'Enter' });
 

packages/date-picker/test/theme-propagation.common.js

@@ -30,9 +30,8 @@ describe('theme attribute', () => {
     });
 
     it('should propagate theme attribute to month calendar', async () => {
-      const overlayContent = datePicker._overlayContent;
-      await waitForScrollToFinish(overlayContent);
-      const monthCalendar = overlayContent.querySelector('vaadin-month-calendar');
+      await waitForScrollToFinish(datePicker);
+      const monthCalendar = datePicker._overlayContent.querySelector('vaadin-month-calendar');
       expect(monthCalendar.getAttribute('theme')).to.equal('foo');
     });
   });

packages/date-picker/test/value-commit.common.js

@@ -255,7 +255,7 @@ describe('value commit', () => {
       await waitForOverlayRender();
       // Focus yesterday's date.
       await sendKeys({ press: 'ArrowLeft' });
-      await waitForScrollToFinish(datePicker._overlayContent);
+      await waitForScrollToFinish(datePicker);
     });
 
     it('should commit on focused date selection with click', () => {
@@ -315,7 +315,7 @@ describe('value commit', () => {
       beforeEach(async () => {
         // Focus yesterday's date.
         await sendKeys({ press: 'ArrowLeft' });
-        await waitForScrollToFinish(datePicker._overlayContent);
+        await waitForScrollToFinish(datePicker);
       });
 
       it('should commit on focused date selection with click', () => {