From f88b74dcdaebb1536dc9042b852482b79ca42901 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 6 Dec 2023 11:58:53 -0500
Subject: [PATCH] fix(picker): keyboard entry works with options

---
 core/src/components/picker/picker.tsx         | 16 ++++--
 .../picker/test/keyboard-entry/picker.e2e.ts  | 55 ++++++++++++++-----
 2 files changed, 52 insertions(+), 19 deletions(-)

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 }) =>
 
         <script>
           const column = document.querySelector('ion-picker-column');
-          column.items = [
+          column.numericInput = true;
+          const items = [
             { text: '01', value: 1 },
             { text: '02', value: 2 },
             { text: '03', value: 3 },
             { text: '04', value: 4 },
             { text: '05', value: 5 }
           ];
-          column.value = 5;
-          column.numericInput = true;
+
+          items.forEach((item) => {
+            const option = document.createElement('ion-picker-column-option');
+            option.value = item.value;
+            option.textContent = item.text;
+
+            column.appendChild(option);
+          });
         </script>
       `,
         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 }) =>
 
         <script>
           const firstColumn = document.querySelector('ion-picker-column#first');
-          firstColumn.items = [
+          const firstItems = [
             { text: '01', value: 1 },
             { text: '02', value: 2 },
             { text: '03', value: 3 },
@@ -61,8 +67,16 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
           firstColumn.value = 5;
           firstColumn.numericInput = true;
 
+          firstItems.forEach((item) => {
+            const option = document.createElement('ion-picker-column-option');
+            option.value = item.value;
+            option.textContent = item.text;
+
+            firstColumn.appendChild(option);
+          });
+
           const secondColumn = document.querySelector('ion-picker-column#second');
-          secondColumn.items = [
+          const secondItems = [
             { text: '20', value: 20 },
             { text: '21', value: 21 },
             { text: '22', value: 22 },
@@ -71,11 +85,18 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
           ];
           secondColumn.value = 22;
           secondColumn.numericInput = true;
+
+          secondItems.forEach((item) => {
+            const option = document.createElement('ion-picker-column-option');
+            option.value = item.value;
+            option.textContent = item.text;
+
+            secondColumn.appendChild(option);
+          });
         </script>
       `,
         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 }) =>
 
         <script>
           const column = document.querySelector('ion-picker-column');
-          column.items = [
+          const items = [
             { text: '00', value: 12 },
             { text: '01', value: 1 },
             { text: '02', value: 2 },
@@ -120,6 +141,14 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
           ];
           column.value = 5;
           column.numericInput = true;
+
+          items.forEach((item) => {
+            const option = document.createElement('ion-picker-column-option');
+            option.value = item.value;
+            option.textContent = item.text;
+
+            column.appendChild(option);
+          });
         </script>
       `,
         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);
     });
   });