fix(datetime): closing time picker no longer changes month (#25478)

resolves #25438
ionic-team · Jun 17, 2022 · f9ab9b5 · f9ab9b5
1 parent 1a8d23d
commit f9ab9b5
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 4 deletions.
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts
@@ -2,6 +2,35 @@ import { expect } from '@playwright/test';
 import type { E2EPage } from '@utils/test/playwright';
 import { test } from '@utils/test/playwright';
 
+test.describe('datetime: closing time popover', () => {
+  test('it should not change months', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/ionic-team/ionic-framework/issues/25438',
+    });
+
+    await page.setContent(`
+      <ion-datetime></ion-datetime>
+    `);
+
+    const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+    const ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
+    const timeButton = page.locator('.time-body');
+    const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+    const currentMonthAndYear = await calendarMonthYear.evaluate((el: HTMLElement) => el.innerText);
+
+    await timeButton.click();
+    await ionPopoverDidPresent.next();
+
+    await page.keyboard.press('Escape');
+
+    await ionPopoverDidDismiss.next();
+    await page.waitForChanges();
+
+    expect(calendarMonthYear).toHaveText(currentMonthAndYear);
+  });
+});
+
 test.describe('datetime: selecting a day', () => {
   const testHighlight = async (page: E2EPage, datetimeID: string) => {
     const today = new Date();

diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts
@@ -84,15 +84,14 @@ export const createOverlay = <T extends HTMLIonOverlayElement>(
 
 const focusableQueryString =
   '[tabindex]:not([tabindex^="-"]), input:not([type=hidden]):not([tabindex^="-"]), textarea:not([tabindex^="-"]), button:not([tabindex^="-"]), select:not([tabindex^="-"]), .ion-focusable:not([tabindex^="-"])';
-const innerFocusableQueryString = 'input:not([type=hidden]), textarea, button, select';
 
 export const focusFirstDescendant = (ref: Element, overlay: HTMLIonOverlayElement) => {
   let firstInput = ref.querySelector(focusableQueryString) as HTMLElement | null;
 
   const shadowRoot = firstInput?.shadowRoot;
   if (shadowRoot) {
     // If there are no inner focusable elements, just focus the host element.
-    firstInput = shadowRoot.querySelector(innerFocusableQueryString) || firstInput;
+    firstInput = shadowRoot.querySelector(focusableQueryString) || firstInput;
   }
 
   if (firstInput) {
@@ -112,7 +111,7 @@ const focusLastDescendant = (ref: Element, overlay: HTMLIonOverlayElement) => {
   const shadowRoot = lastInput?.shadowRoot;
   if (shadowRoot) {
     // If there are no inner focusable elements, just focus the host element.
-    lastInput = shadowRoot.querySelector(innerFocusableQueryString) || lastInput;
+    lastInput = shadowRoot.querySelector(focusableQueryString) || lastInput;
   }
 
   if (lastInput) {
@@ -460,7 +459,7 @@ const focusPreviousElementOnDismiss = async (overlayEl: any) => {
   const shadowRoot = previousElement?.shadowRoot;
   if (shadowRoot) {
     // If there are no inner focusable elements, just focus the host element.
-    previousElement = shadowRoot.querySelector(innerFocusableQueryString) || previousElement;
+    previousElement = shadowRoot.querySelector(focusableQueryString) || previousElement;
   }
 
   await overlayEl.onDidDismiss();