From d0b624454b8c597d5949c8b14d6e944d16b23697 Mon Sep 17 00:00:00 2001 From: Victoria Date: Wed, 22 Jan 2025 15:02:37 +0200 Subject: [PATCH 1/8] fix(datetime): allow accurate typing of time values in 24-hour format - Adjusted the `selectMultiColumn` logic to handle keyboard values like 20 and 22 dynamically. - Introduced checks for the maximum column value to enable flexible input behavior. - Added e2e tests to verify correct value selection for both 12-hour and 24-hour formats. Closes #28877 --- core/src/components/picker/picker.tsx | 32 ++++--- .../picker/test/keyboard-entry/picker.e2e.ts | 94 +++++++++++++++++++ 2 files changed, 115 insertions(+), 11 deletions(-) diff --git a/core/src/components/picker/picker.tsx b/core/src/components/picker/picker.tsx index 1d98e049d4b..d28d04be3c3 100644 --- a/core/src/components/picker/picker.tsx +++ b/core/src/components/picker/picker.tsx @@ -432,6 +432,17 @@ export class Picker implements ComponentInterface { const firstColumn = numericPickers[0]; const lastColumn = numericPickers[1]; + // Get the maximum value from the first column's options + const columnOptions = Array.from(firstColumn.querySelectorAll('ion-picker-column-option')); + const maxFirstColumnValue = Math.max( + ...columnOptions + .map((option) => parseInt(option.textContent?.trim() || '0', 10)) // Extract and parse text content + .filter((num) => !isNaN(num)) // Ensure valid numbers only + ); + + // check for 24-hour format + const allowTwo = maxFirstColumnValue >= 20; + let value = inputEl.value; let minuteValue; switch (value.length) { @@ -439,14 +450,11 @@ export class Picker implements ComponentInterface { this.searchColumn(firstColumn, value); break; case 2: - /** - * If the first character is `0` or `1` it is - * possible that users are trying to type `09` - * or `11` into the hour field, so we should look - * at that first. - */ const firstCharacter = inputEl.value.substring(0, 1); - value = firstCharacter === '0' || firstCharacter === '1' ? inputEl.value : firstCharacter; + value = + firstCharacter === '0' || firstCharacter === '1' || (allowTwo && firstCharacter === '2') + ? inputEl.value + : firstCharacter; this.searchColumn(firstColumn, value); @@ -462,14 +470,14 @@ export class Picker implements ComponentInterface { break; case 3: /** - * If the first character is `0` or `1` it is + * If the first character is `0` or `1` or allowed '2' it is * possible that users are trying to type `09` * or `11` into the hour field, so we should look * at that first. */ const firstCharacterAgain = inputEl.value.substring(0, 1); value = - firstCharacterAgain === '0' || firstCharacterAgain === '1' + firstCharacterAgain === '0' || firstCharacterAgain === '1' || (allowTwo && firstCharacterAgain === '2') ? inputEl.value.substring(0, 2) : firstCharacterAgain; @@ -486,14 +494,16 @@ export class Picker implements ComponentInterface { break; case 4: /** - * If the first character is `0` or `1` it is + * If the first character is `0` or `1` or allowed '2' it is * possible that users are trying to type `09` * or `11` into the hour field, so we should look * at that first. */ const firstCharacterAgainAgain = inputEl.value.substring(0, 1); value = - firstCharacterAgainAgain === '0' || firstCharacterAgainAgain === '1' + firstCharacterAgainAgain === '0' || + firstCharacterAgainAgain === '1' || + (allowTwo && firstCharacterAgainAgain === '2') ? inputEl.value.substring(0, 2) : firstCharacterAgainAgain; this.searchColumn(firstColumn, value); 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 64d4a1cce13..036d80bf54f 100644 --- a/core/src/components/picker/test/keyboard-entry/picker.e2e.ts +++ b/core/src/components/picker/test/keyboard-entry/picker.e2e.ts @@ -163,6 +163,100 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => await expect(ionChange).toHaveReceivedEventDetail({ value: 12 }); await expect(column).toHaveJSProperty('value', 12); }); + + test('should allow typing 22 in a column where the max value is 23 and not just set it to 2', async ({ page }) => { + await page.setContent( + ` + + + + + + `, + config + ); + + const column = page.locator('ion-picker-column'); + const ionChange = await page.spyOnEvent('ionChange'); + await column.evaluate((el: HTMLIonPickerColumnElement) => el.setFocus()); + + // Simulate typing '22' + await page.keyboard.press('Digit2'); + await page.keyboard.press('Digit2'); + + // Ensure the column value is updated to 22 + await expect(ionChange).toHaveReceivedEventDetail({ value: 22 }); + await expect(column).toHaveJSProperty('value', 22); + }); + + test('should set value to 2 and not wait for another digit when max value is 12', async ({ page }) => { + await page.setContent( + ` + + + + + + `, + config + ); + + const column = page.locator('ion-picker-column'); + const ionChange = await page.spyOnEvent('ionChange'); + await column.evaluate((el: HTMLIonPickerColumnElement) => el.setFocus()); + + // Simulate typing '2' + await page.keyboard.press('Digit2'); + + // Ensure the value is immediately set to 2 + await expect(ionChange).toHaveReceivedEventDetail({ value: 2 }); + await expect(column).toHaveJSProperty('value', 2); + }); + test('pressing Enter should dismiss the keyboard', async ({ page }) => { test.info().annotations.push({ type: 'issue', From 6ba39b471fb6fe0a59fda119dae5f48fccf01cde Mon Sep 17 00:00:00 2001 From: Victoria Date: Wed, 22 Jan 2025 15:07:52 +0200 Subject: [PATCH 2/8] add missing comment --- core/src/components/picker/picker.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/core/src/components/picker/picker.tsx b/core/src/components/picker/picker.tsx index d28d04be3c3..683fb4f8c1e 100644 --- a/core/src/components/picker/picker.tsx +++ b/core/src/components/picker/picker.tsx @@ -449,6 +449,12 @@ export class Picker implements ComponentInterface { case 1: this.searchColumn(firstColumn, value); break; + /** + * If the first character is `0` or `1` or allowed '2' it is + * possible that users are trying to type `09` + * or `11` into the hour field, so we should look + * at that first. + */ case 2: const firstCharacter = inputEl.value.substring(0, 1); value = From cf9dd611dc5dd6300e72e8ce75a7fcebdfce87a6 Mon Sep 17 00:00:00 2001 From: ShaneK Date: Tue, 25 Mar 2025 13:22:43 -0700 Subject: [PATCH 3/8] refactor(picker): making multi-column select type ahead more flexible with how it picks numbers --- core/src/components/picker/picker.tsx | 150 +++++++++----------------- 1 file changed, 50 insertions(+), 100 deletions(-) diff --git a/core/src/components/picker/picker.tsx b/core/src/components/picker/picker.tsx index 683fb4f8c1e..0264a8dc238 100644 --- a/core/src/components/picker/picker.tsx +++ b/core/src/components/picker/picker.tsx @@ -410,8 +410,13 @@ export class Picker implements ComponentInterface { colEl: HTMLIonPickerColumnElement, value: string, zeroBehavior: 'start' | 'end' = 'start' - ) => { + ): boolean => { + if (!value) { + return false; + } + const behavior = zeroBehavior === 'start' ? /^0+/ : /0$/; + value = value.replace(behavior, ''); const option = Array.from(colEl.querySelectorAll('ion-picker-column-option')).find((el) => { return el.disabled !== true && el.textContent!.replace(behavior, '') === value; }); @@ -419,8 +424,45 @@ export class Picker implements ComponentInterface { if (option) { colEl.setValue(option.value); } + + return !!option; }; + /** + * Attempts to intelligently search the first and second + * column as if they're number columns for the provided numbers + * where the first two numbers inpu are the first column + * and the last 2 are the last column. Tries to allow for the first + * number to be ignored for situations where typos occurred. + */ + private multiColumnSearch = (firstColumn: HTMLIonPickerColumnElement, secondColumn: HTMLIonPickerColumnElement, input: string) => { + if (input.length === 0) { + return; + } + + const inputArray = input.split(''); + const hourValue = inputArray.slice(0, 2).join(''); + const foundHour = this.searchColumn(firstColumn, hourValue); + + if (inputArray.length > 2 && foundHour) { + const minuteValue = inputArray.slice(2, 4).join(''); + this.searchColumn(secondColumn, minuteValue); + } else if (!foundHour && inputArray.length >= 1) { + let singleDigitHour = inputArray[0]; + let singleDigitFound = this.searchColumn(firstColumn, singleDigitHour); + if (!singleDigitFound) { + inputArray.shift(); + singleDigitHour = inputArray[0]; + singleDigitFound = this.searchColumn(firstColumn, singleDigitHour); + } + + if (singleDigitFound && inputArray.length > 1) { + const remainingDigits = inputArray.slice(1, 3).join(''); + this.searchColumn(secondColumn, remainingDigits); + } + } + } + private selectMultiColumn = () => { const { inputEl, el } = this; if (!inputEl) { @@ -432,108 +474,16 @@ export class Picker implements ComponentInterface { const firstColumn = numericPickers[0]; const lastColumn = numericPickers[1]; - // Get the maximum value from the first column's options - const columnOptions = Array.from(firstColumn.querySelectorAll('ion-picker-column-option')); - const maxFirstColumnValue = Math.max( - ...columnOptions - .map((option) => parseInt(option.textContent?.trim() || '0', 10)) // Extract and parse text content - .filter((num) => !isNaN(num)) // Ensure valid numbers only - ); - - // check for 24-hour format - const allowTwo = maxFirstColumnValue >= 20; - let value = inputEl.value; - let minuteValue; - switch (value.length) { - case 1: - this.searchColumn(firstColumn, value); - break; - /** - * If the first character is `0` or `1` or allowed '2' it is - * possible that users are trying to type `09` - * or `11` into the hour field, so we should look - * at that first. - */ - case 2: - const firstCharacter = inputEl.value.substring(0, 1); - value = - firstCharacter === '0' || firstCharacter === '1' || (allowTwo && firstCharacter === '2') - ? inputEl.value - : firstCharacter; - - this.searchColumn(firstColumn, value); - - /** - * If only checked the first value, - * we can check the second value - * for a match in the minutes column - */ - if (value.length === 1) { - minuteValue = inputEl.value.substring(inputEl.value.length - 1); - this.searchColumn(lastColumn, minuteValue, 'end'); - } - break; - case 3: - /** - * If the first character is `0` or `1` or allowed '2' it is - * possible that users are trying to type `09` - * or `11` into the hour field, so we should look - * at that first. - */ - const firstCharacterAgain = inputEl.value.substring(0, 1); - value = - firstCharacterAgain === '0' || firstCharacterAgain === '1' || (allowTwo && firstCharacterAgain === '2') - ? inputEl.value.substring(0, 2) - : firstCharacterAgain; - - this.searchColumn(firstColumn, value); - - /** - * If only checked the first value, - * we can check the second value - * for a match in the minutes column - */ - minuteValue = value.length === 1 ? inputEl.value.substring(1) : inputEl.value.substring(2); - - this.searchColumn(lastColumn, minuteValue, 'end'); - break; - case 4: - /** - * If the first character is `0` or `1` or allowed '2' it is - * possible that users are trying to type `09` - * or `11` into the hour field, so we should look - * at that first. - */ - const firstCharacterAgainAgain = inputEl.value.substring(0, 1); - value = - firstCharacterAgainAgain === '0' || - firstCharacterAgainAgain === '1' || - (allowTwo && firstCharacterAgainAgain === '2') - ? inputEl.value.substring(0, 2) - : firstCharacterAgainAgain; - this.searchColumn(firstColumn, value); + if (value.length > 4) { + const startIndex = inputEl.value.length - 4; + const newString = inputEl.value.substring(startIndex); - /** - * If only checked the first value, - * we can check the second value - * for a match in the minutes column - */ - const minuteValueAgain = - value.length === 1 - ? inputEl.value.substring(1, inputEl.value.length) - : inputEl.value.substring(2, inputEl.value.length); - this.searchColumn(lastColumn, minuteValueAgain, 'end'); - - break; - default: - const startIndex = inputEl.value.length - 4; - const newString = inputEl.value.substring(startIndex); - - inputEl.value = newString; - this.selectMultiColumn(); - break; + inputEl.value = newString; + value = newString; } + + this.multiColumnSearch(firstColumn, lastColumn, value); }; /** From 48f25e6eb87f93e5100d7b27836494aa23607b95 Mon Sep 17 00:00:00 2001 From: ShaneK Date: Tue, 25 Mar 2025 13:38:34 -0700 Subject: [PATCH 4/8] fix(picker): lint --- core/src/components/picker/picker.tsx | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/core/src/components/picker/picker.tsx b/core/src/components/picker/picker.tsx index 0264a8dc238..5e12754c80a 100644 --- a/core/src/components/picker/picker.tsx +++ b/core/src/components/picker/picker.tsx @@ -429,13 +429,17 @@ export class Picker implements ComponentInterface { }; /** - * Attempts to intelligently search the first and second - * column as if they're number columns for the provided numbers - * where the first two numbers inpu are the first column - * and the last 2 are the last column. Tries to allow for the first - * number to be ignored for situations where typos occurred. + * Attempts to intelligently search the first and second + * column as if they're number columns for the provided numbers + * where the first two numbers inpu are the first column + * and the last 2 are the last column. Tries to allow for the first + * number to be ignored for situations where typos occurred. */ - private multiColumnSearch = (firstColumn: HTMLIonPickerColumnElement, secondColumn: HTMLIonPickerColumnElement, input: string) => { + private multiColumnSearch = ( + firstColumn: HTMLIonPickerColumnElement, + secondColumn: HTMLIonPickerColumnElement, + input: string + ) => { if (input.length === 0) { return; } @@ -461,7 +465,7 @@ export class Picker implements ComponentInterface { this.searchColumn(secondColumn, remainingDigits); } } - } + }; private selectMultiColumn = () => { const { inputEl, el } = this; From 4b430a3d6ef397d9f1952b94fa914318ccf7aa6d Mon Sep 17 00:00:00 2001 From: ShaneK Date: Tue, 25 Mar 2025 14:21:13 -0700 Subject: [PATCH 5/8] fix(datepicker): fixing issue where updating the time display would use the stale time, preventing hours from updating correctly after the first time they got updated --- core/src/components/datetime/datetime.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index 9154c24e60b..fcdb8bcabe0 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -1984,7 +1984,7 @@ export class Datetime implements ComponentInterface { }); this.setActiveParts({ - ...activePart, + ...this.getActivePartsWithFallback(), hour: ev.detail.value, }); @@ -2024,7 +2024,7 @@ export class Datetime implements ComponentInterface { }); this.setActiveParts({ - ...activePart, + ...this.getActivePartsWithFallback(), minute: ev.detail.value, }); @@ -2070,7 +2070,7 @@ export class Datetime implements ComponentInterface { }); this.setActiveParts({ - ...activePart, + ...this.getActivePartsWithFallback(), ampm: ev.detail.value, hour, }); From a3a6ee4a24d71739d1f04a348e23cec159aedbb4 Mon Sep 17 00:00:00 2001 From: ShaneK Date: Wed, 26 Mar 2025 09:38:48 -0700 Subject: [PATCH 6/8] fix(picker): fixing up comments, test annotations --- core/src/components/picker/picker.tsx | 15 +++++++++++++-- .../picker/test/keyboard-entry/picker.e2e.ts | 12 ++++++++++-- 2 files changed, 23 insertions(+), 4 deletions(-) diff --git a/core/src/components/picker/picker.tsx b/core/src/components/picker/picker.tsx index 5e12754c80a..71db6a3cac7 100644 --- a/core/src/components/picker/picker.tsx +++ b/core/src/components/picker/picker.tsx @@ -431,7 +431,7 @@ export class Picker implements ComponentInterface { /** * Attempts to intelligently search the first and second * column as if they're number columns for the provided numbers - * where the first two numbers inpu are the first column + * where the first two numbers are the first column * and the last 2 are the last column. Tries to allow for the first * number to be ignored for situations where typos occurred. */ @@ -446,20 +446,31 @@ export class Picker implements ComponentInterface { const inputArray = input.split(''); const hourValue = inputArray.slice(0, 2).join(''); + // Try to find a match for the first two digits in the first column const foundHour = this.searchColumn(firstColumn, hourValue); + // If we have more than 2 digits and found a match for hours, + // use the remaining digits for the second column (minutes) if (inputArray.length > 2 && foundHour) { const minuteValue = inputArray.slice(2, 4).join(''); this.searchColumn(secondColumn, minuteValue); - } else if (!foundHour && inputArray.length >= 1) { + } + // If we couldn't find a match for the two-digit hour, try single digit approaches + else if (!foundHour && inputArray.length >= 1) { + // First try the first digit as a single-digit hour let singleDigitHour = inputArray[0]; let singleDigitFound = this.searchColumn(firstColumn, singleDigitHour); + + // If that didn't work, try the second digit as a single-digit hour + // (handles case where user made a typo in the first digit, or they typed over themselves) if (!singleDigitFound) { inputArray.shift(); singleDigitHour = inputArray[0]; singleDigitFound = this.searchColumn(firstColumn, singleDigitHour); } + // If we found a single-digit hour and have remaining digits, + // use up to 2 of the remaining digits for the second column if (singleDigitFound && inputArray.length > 1) { const remainingDigits = inputArray.slice(1, 3).join(''); this.searchColumn(secondColumn, remainingDigits); 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 036d80bf54f..eaaad1f047a 100644 --- a/core/src/components/picker/test/keyboard-entry/picker.e2e.ts +++ b/core/src/components/picker/test/keyboard-entry/picker.e2e.ts @@ -164,7 +164,11 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => await expect(column).toHaveJSProperty('value', 12); }); - test('should allow typing 22 in a column where the max value is 23 and not just set it to 2', async ({ page }) => { + test('should allow typing 22 in a column where the max value is 23 and not just set it to 2', async ({ page }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/28877', + }); await page.setContent( ` @@ -208,7 +212,11 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => await expect(column).toHaveJSProperty('value', 22); }); - test('should set value to 2 and not wait for another digit when max value is 12', async ({ page }) => { + test('should set value to 2 and not wait for another digit when max value is 12', async ({ page }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/28877', + }); await page.setContent( ` From b8680982d7e5d9ff1ccfc8b3483f6b1031d27dc4 Mon Sep 17 00:00:00 2001 From: ShaneK Date: Wed, 26 Mar 2025 09:43:05 -0700 Subject: [PATCH 7/8] fix(picker): lint --- .../picker/test/keyboard-entry/picker.e2e.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) 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 eaaad1f047a..9cfd75dfa59 100644 --- a/core/src/components/picker/test/keyboard-entry/picker.e2e.ts +++ b/core/src/components/picker/test/keyboard-entry/picker.e2e.ts @@ -164,10 +164,12 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => await expect(column).toHaveJSProperty('value', 12); }); - test('should allow typing 22 in a column where the max value is 23 and not just set it to 2', async ({ page }, testInfo) => { + test('should allow typing 22 in a column where the max value is 23 and not just set it to 2', async ({ + page, + }, testInfo) => { testInfo.annotations.push({ - type: 'issue', - description: 'https://github.com/ionic-team/ionic-framework/issues/28877', + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/28877', }); await page.setContent( ` @@ -216,7 +218,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => testInfo.annotations.push({ type: 'issue', description: 'https://github.com/ionic-team/ionic-framework/issues/28877', - }); + }); await page.setContent( ` From 4de01b0434b2f4774a189d87f40b661b0d195d71 Mon Sep 17 00:00:00 2001 From: ShaneK Date: Wed, 26 Mar 2025 11:55:19 -0700 Subject: [PATCH 8/8] tests(picker): fixing new tests for multi-column select to make them use multi-column select --- .../picker/test/keyboard-entry/picker.e2e.ts | 114 ++++++++++++++---- 1 file changed, 88 insertions(+), 26 deletions(-) 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 9cfd75dfa59..b54cd03585a 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'); + + const box = await highlight.boundingBox(); + if (box !== null) { + await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2); + } - // Simulate typing '22' + // 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 }) => {