diff --git a/core/src/components/picker/picker.tsx b/core/src/components/picker/picker.tsx
index 94e079704e..565ad773ca 100644
--- a/core/src/components/picker/picker.tsx
+++ b/core/src/components/picker/picker.tsx
@@ -323,7 +323,9 @@ export class Picker implements ComponentInterface {
return;
}
- const values = inputModeColumn.items.filter((item) => item.disabled !== true);
+ const options = Array.from(inputModeColumn.querySelectorAll('ion-picker-column-option')).filter(
+ (el) => el.disabled !== true
+ );
/**
* If users pause for a bit, the search
@@ -368,8 +370,8 @@ export class Picker implements ComponentInterface {
* 0+(?=[1-9]) --> Match 1 or more zeros that are followed by 1-9
* 0+(?=0$) --> Match 1 or more zeros that must be followed by one 0 and end.
*/
- const findItemFromCompleteValue = values.find(({ text }) => {
- const parsedText = text.replace(/^0+(?=[1-9])|0+(?=0$)/, '');
+ const findItemFromCompleteValue = options.find(({ textContent }) => {
+ const parsedText = textContent!.replace(/^0+(?=[1-9])|0+(?=0$)/, '');
return parsedText === inputEl.value;
});
@@ -401,10 +403,12 @@ export class Picker implements ComponentInterface {
zeroBehavior: 'start' | 'end' = 'start'
) => {
const behavior = zeroBehavior === 'start' ? /^0+/ : /0$/;
- const item = colEl.items.find(({ text, disabled }) => disabled !== true && text.replace(behavior, '') === value);
+ const option = Array.from(colEl.querySelectorAll('ion-picker-column-option')).find((el) => {
+ return el.disabled !== true && el.textContent!.replace(behavior, '') === value;
+ });
- if (item) {
- colEl.setValue(item.value);
+ if (option) {
+ colEl.setValue(option.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 e1059c2c0c..2488a5f834 100644
--- a/core/src/components/picker/test/keyboard-entry/picker.e2e.ts
+++ b/core/src/components/picker/test/keyboard-entry/picker.e2e.ts
@@ -5,9 +5,8 @@ import type { E2ELocator } from '@utils/test/playwright/page/utils/locator';
/**
* This behavior does not vary across modes/directions.
*/
-// TODO FW-5580 fix this functionality
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
- test.describe.skip(title('picker: keyboard entry'), () => {
+ test.describe(title('picker: keyboard entry'), () => {
test('should scroll to and update the value prop for a single column', async ({ page }) => {
await page.setContent(
`
@@ -17,15 +16,22 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
`,
config
@@ -37,7 +43,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
await page.keyboard.press('Digit2');
- await expect(ionChange).toHaveReceivedEventDetail({ text: '02', value: 2 });
+ await expect(ionChange).toHaveReceivedEventDetail({ value: 2 });
await expect(column).toHaveJSProperty('value', 2);
});
@@ -51,7 +57,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
`,
config
);
-
const firstColumn = page.locator('ion-picker-column#first');
const secondColumn = page.locator('ion-picker-column#second');
const highlight = page.locator('ion-picker .picker-highlight');
@@ -92,12 +113,12 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
await page.keyboard.press('Digit2');
- await expect(firstIonChange).toHaveReceivedEventDetail({ text: '02', value: 2 });
+ await expect(firstIonChange).toHaveReceivedEventDetail({ value: 2 });
await expect(firstColumn).toHaveJSProperty('value', 2);
await page.keyboard.press('Digit2+Digit4');
- await expect(secondIonChange).toHaveReceivedEventDetail({ text: '24', value: 24 });
+ await expect(secondIonChange).toHaveReceivedEventDetail({ value: 24 });
await expect(secondColumn).toHaveJSProperty('value', 24);
});
@@ -110,7 +131,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
`,
config
@@ -131,7 +160,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
await page.keyboard.press('Digit0');
- await expect(ionChange).toHaveReceivedEventDetail({ text: '00', value: 12 });
+ await expect(ionChange).toHaveReceivedEventDetail({ value: 12 });
await expect(column).toHaveJSProperty('value', 12);
});
});