diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts index e884249a74..aac79a479f 100644 --- 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(` + + `); + + 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 index 48be57b788..5233f292b6 100644 --- a/core/src/utils/overlays.ts +++ b/core/src/utils/overlays.ts @@ -84,7 +84,6 @@ export const createOverlay = ( 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; @@ -92,7 +91,7 @@ export const focusFirstDescendant = (ref: Element, overlay: HTMLIonOverlayElemen 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();