diff --git a/core/src/components/picker/test/keyboard-entry/picker.e2e.ts b/core/src/components/picker/test/keyboard-entry/picker.e2e.ts
index 9cfd75dfa5..b54cd03585 100644
--- a/core/src/components/picker/test/keyboard-entry/picker.e2e.ts
+++ b/core/src/components/picker/test/keyboard-entry/picker.e2e.ts
@@ -174,13 +174,14 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
await page.setContent(
`
-
+
+
`,
config
);
- const column = page.locator('ion-picker-column');
- const ionChange = await page.spyOnEvent('ionChange');
- await column.evaluate((el: HTMLIonPickerColumnElement) => el.setFocus());
+ const hoursColumn = page.locator('ion-picker-column#hours');
+ const minutesColumn = page.locator('ion-picker-column#minutes');
+ const hoursIonChange = await (hoursColumn as E2ELocator).spyOnEvent('ionChange');
+ const minutesIonChange = await (minutesColumn as E2ELocator).spyOnEvent('ionChange');
+ const highlight = page.locator('ion-picker .picker-highlight');
- // Simulate typing '22'
+ const box = await highlight.boundingBox();
+ if (box !== null) {
+ await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2);
+ }
+
+ // Simulate typing '2230' (22 hours, 30 minutes)
await page.keyboard.press('Digit2');
await page.keyboard.press('Digit2');
+ await page.keyboard.press('Digit3');
+ await page.keyboard.press('Digit0');
- // Ensure the column value is updated to 22
- await expect(ionChange).toHaveReceivedEventDetail({ value: 22 });
- await expect(column).toHaveJSProperty('value', 22);
+ // Ensure the hours column is set to 22
+ await expect(hoursIonChange).toHaveReceivedEventDetail({ value: 22 });
+ await expect(hoursColumn).toHaveJSProperty('value', 22);
+
+ // Ensure the minutes column is set to 30
+ await expect(minutesIonChange).toHaveReceivedEventDetail({ value: 30 });
+ await expect(minutesColumn).toHaveJSProperty('value', 30);
});
test('should set value to 2 and not wait for another digit when max value is 12', async ({ page }, testInfo) => {
@@ -222,13 +253,14 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
await page.setContent(
`
-
+
+
`,
config
);
- const column = page.locator('ion-picker-column');
- const ionChange = await page.spyOnEvent('ionChange');
- await column.evaluate((el: HTMLIonPickerColumnElement) => el.setFocus());
+ const hoursColumn = page.locator('ion-picker-column#hours');
+ const minutesColumn = page.locator('ion-picker-column#minutes');
+ const hoursIonChange = await (hoursColumn as E2ELocator).spyOnEvent('ionChange');
+ const minutesIonChange = await (minutesColumn as E2ELocator).spyOnEvent('ionChange');
+ const highlight = page.locator('ion-picker .picker-highlight');
- // Simulate typing '2'
+ const box = await highlight.boundingBox();
+ if (box !== null) {
+ await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2);
+ }
+
+ // Simulate typing '245' (2 hours, 45 minutes)
await page.keyboard.press('Digit2');
+ await page.keyboard.press('Digit4');
+ await page.keyboard.press('Digit5');
- // Ensure the value is immediately set to 2
- await expect(ionChange).toHaveReceivedEventDetail({ value: 2 });
- await expect(column).toHaveJSProperty('value', 2);
+ // Ensure the hours column is set to 2
+ await expect(hoursIonChange).toHaveReceivedEventDetail({ value: 2 });
+ await expect(hoursColumn).toHaveJSProperty('value', 2);
+
+ // Ensure the minutes column is set to 45
+ await expect(minutesIonChange).toHaveReceivedEventDetail({ value: 45 });
+ await expect(minutesColumn).toHaveJSProperty('value', 45);
});
test('pressing Enter should dismiss the keyboard', async ({ page }) => {