mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 03:32:21 +08:00
fix(datetime): closing time picker no longer changes month (#25478)
resolves #25438
This commit is contained in:
@ -2,6 +2,35 @@ import { expect } from '@playwright/test';
|
|||||||
import type { E2EPage } from '@utils/test/playwright';
|
import type { E2EPage } from '@utils/test/playwright';
|
||||||
import { test } 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', () => {
|
test.describe('datetime: selecting a day', () => {
|
||||||
const testHighlight = async (page: E2EPage, datetimeID: string) => {
|
const testHighlight = async (page: E2EPage, datetimeID: string) => {
|
||||||
const today = new Date();
|
const today = new Date();
|
||||||
|
@ -84,7 +84,6 @@ export const createOverlay = <T extends HTMLIonOverlayElement>(
|
|||||||
|
|
||||||
const focusableQueryString =
|
const focusableQueryString =
|
||||||
'[tabindex]:not([tabindex^="-"]), input:not([type=hidden]):not([tabindex^="-"]), textarea:not([tabindex^="-"]), button:not([tabindex^="-"]), select:not([tabindex^="-"]), .ion-focusable:not([tabindex^="-"])';
|
'[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) => {
|
export const focusFirstDescendant = (ref: Element, overlay: HTMLIonOverlayElement) => {
|
||||||
let firstInput = ref.querySelector(focusableQueryString) as HTMLElement | null;
|
let firstInput = ref.querySelector(focusableQueryString) as HTMLElement | null;
|
||||||
@ -92,7 +91,7 @@ export const focusFirstDescendant = (ref: Element, overlay: HTMLIonOverlayElemen
|
|||||||
const shadowRoot = firstInput?.shadowRoot;
|
const shadowRoot = firstInput?.shadowRoot;
|
||||||
if (shadowRoot) {
|
if (shadowRoot) {
|
||||||
// If there are no inner focusable elements, just focus the host element.
|
// If there are no inner focusable elements, just focus the host element.
|
||||||
firstInput = shadowRoot.querySelector(innerFocusableQueryString) || firstInput;
|
firstInput = shadowRoot.querySelector(focusableQueryString) || firstInput;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (firstInput) {
|
if (firstInput) {
|
||||||
@ -112,7 +111,7 @@ const focusLastDescendant = (ref: Element, overlay: HTMLIonOverlayElement) => {
|
|||||||
const shadowRoot = lastInput?.shadowRoot;
|
const shadowRoot = lastInput?.shadowRoot;
|
||||||
if (shadowRoot) {
|
if (shadowRoot) {
|
||||||
// If there are no inner focusable elements, just focus the host element.
|
// If there are no inner focusable elements, just focus the host element.
|
||||||
lastInput = shadowRoot.querySelector(innerFocusableQueryString) || lastInput;
|
lastInput = shadowRoot.querySelector(focusableQueryString) || lastInput;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (lastInput) {
|
if (lastInput) {
|
||||||
@ -460,7 +459,7 @@ const focusPreviousElementOnDismiss = async (overlayEl: any) => {
|
|||||||
const shadowRoot = previousElement?.shadowRoot;
|
const shadowRoot = previousElement?.shadowRoot;
|
||||||
if (shadowRoot) {
|
if (shadowRoot) {
|
||||||
// If there are no inner focusable elements, just focus the host element.
|
// 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();
|
await overlayEl.onDidDismiss();
|
||||||
|
Reference in New Issue
Block a user