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

resolves #25438
This commit is contained in:
Liam DeBeasi
2022-06-17 11:35:26 -04:00
committed by GitHub
parent 1a8d23da81
commit f9ab9b54dd
2 changed files with 32 additions and 4 deletions

View File

@ -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();

View File

@ -84,7 +84,6 @@ 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;
@ -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();