fix(picker): keyboard entry works with options

core/api.txt

@@ -917,7 +917,7 @@ ion-picker-column,prop,items,PickerColumnItem[],[],false,false
 ion-picker-column,prop,mode,"ios" | "md",undefined,false,false
 ion-picker-column,prop,value,number | string | undefined,undefined,false,false
 ion-picker-column,method,setFocus,setFocus() => Promise<void>
-ion-picker-column,event,ionChange,{ value: string | number | undefined; },true
+ion-picker-column,event,ionChange,PickerColumnChangeEventDetail,true
 
 ion-picker-column-option,shadow
 ion-picker-column-option,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,'primary',false,true

core/src/components.d.ts

@@ -24,7 +24,7 @@ import { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./compone
 import { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
 import { ViewController } from "./components/nav/view-controller";
 import { PickerChangeEventDetail } from "./components/picker/picker-interfaces";
-import { PickerColumnItem } from "./components/picker-column/picker-column-interfaces";
+import { PickerColumnChangeEventDetail, PickerColumnItem, PickerColumnValue } from "./components/picker-column/picker-column-interfaces";
 import { PickerButton, PickerColumn } from "./components/picker-legacy/picker-interface";
 import { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface";
 import { RadioGroupChangeEventDetail } from "./components/radio-group/radio-group-interface";
@@ -60,7 +60,7 @@ export { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./compone
 export { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
 export { ViewController } from "./components/nav/view-controller";
 export { PickerChangeEventDetail } from "./components/picker/picker-interfaces";
-export { PickerColumnItem } from "./components/picker-column/picker-column-interfaces";
+export { PickerColumnChangeEventDetail, PickerColumnItem, PickerColumnValue } from "./components/picker-column/picker-column-interfaces";
 export { PickerButton, PickerColumn } from "./components/picker-legacy/picker-interface";
 export { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface";
 export { RadioGroupChangeEventDetail } from "./components/radio-group/radio-group-interface";
@@ -1984,7 +1984,7 @@ export namespace Components {
         /**
           * Sets the value prop and fires the ionChange event. This is used when we need to fire ionChange from user-generated events that cannot be caught with normal input/change event listeners.
          */
-        "setValue": (value?: string | number) => Promise<void>;
+        "setValue": (value: PickerColumnValue) => Promise<void>;
         /**
           * The selected option in the picker.
          */
@@ -4055,7 +4055,7 @@ declare global {
         new (): HTMLIonPickerElement;
     };
     interface HTMLIonPickerColumnElementEventMap {
-        "ionChange": { value: string | number | undefined };
+        "ionChange": PickerColumnChangeEventDetail;
     }
     interface HTMLIonPickerColumnElement extends Components.IonPickerColumn, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIonPickerColumnElementEventMap>(type: K, listener: (this: HTMLIonPickerColumnElement, ev: IonPickerColumnCustomEvent<HTMLIonPickerColumnElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -6635,7 +6635,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the value has changed.
          */
-        "onIonChange"?: (event: IonPickerColumnCustomEvent<{ value: string | number | undefined }>) => void;
+        "onIonChange"?: (event: IonPickerColumnCustomEvent<PickerColumnChangeEventDetail>) => void;
         /**
           * The selected option in the picker.
          */

core/src/components/picker-column/picker-column-interfaces.ts

@@ -4,3 +4,9 @@ export interface PickerColumnItem {
   value: string | number;
   disabled?: boolean;
 }
+
+export interface PickerColumnChangeEventDetail {
+  value: PickerColumnValue;
+}
+
+export type PickerColumnValue = string | number | undefined;

core/src/components/picker-column/picker-column.tsx

@@ -10,7 +10,7 @@ import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
 import type { PickerCustomEvent } from '../picker/picker-interfaces';
 
-import type { PickerColumnItem } from './picker-column-interfaces';
+import type { PickerColumnItem, PickerColumnChangeEventDetail, PickerColumnValue } from './picker-column-interfaces';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -77,7 +77,7 @@ export class PickerColumn implements ComponentInterface {
   /**
    * Emitted when the value has changed.
    */
-  @Event() ionChange!: EventEmitter<{ value: string | number | undefined }>;
+  @Event() ionChange!: EventEmitter<PickerColumnChangeEventDetail>;
 
   @Watch('value')
   valueChange() {
@@ -175,7 +175,7 @@ export class PickerColumn implements ComponentInterface {
    * @internal
    */
   @Method()
-  async setValue(value?: string | number) {
+  async setValue(value: PickerColumnValue) {
     if (this.value === value) {
       return;
     }

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,13 @@ 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 }) => {
+      /**
+       * Keyboard entry is currently only used inside of Datetime
+       * where we guarantee textContent is set.
+       * If we end up exposing this feature publicly we should revisit this assumption.
+       */
+      const parsedText = textContent!.replace(/^0+(?=[1-9])|0+(?=0$)/, '');
       return parsedText === inputEl.value;
     });
 
@@ -401,10 +408,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);
     }
   };
 

core/src/components/picker/test/keyboard-entry/picker.e2e.ts

@@ -17,15 +17,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 +44,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 +58,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 +68,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 +86,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 +114,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 +132,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 +142,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 +161,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);
     });
   });

packages/angular/src/directives/proxies.ts

@@ -1466,11 +1466,13 @@ export class IonPickerColumn {
 }
 
 
+import type { PickerColumnChangeEventDetail as IIonPickerColumnPickerColumnChangeEventDetail } from '@ionic/core';
+
 export declare interface IonPickerColumn extends Components.IonPickerColumn {
   /**
    * Emitted when the value has changed.
    */
-  ionChange: EventEmitter<CustomEvent<{ value: string | number | undefined }>>;
+  ionChange: EventEmitter<CustomEvent<IIonPickerColumnPickerColumnChangeEventDetail>>;
 }
 
 

packages/angular/standalone/src/directives/proxies.ts

@@ -1462,11 +1462,13 @@ export class IonPickerColumn {
 }
 
 
+import type { PickerColumnChangeEventDetail as IIonPickerColumnPickerColumnChangeEventDetail } from '@ionic/core/components';
+
 export declare interface IonPickerColumn extends Components.IonPickerColumn {
   /**
    * Emitted when the value has changed.
    */
-  ionChange: EventEmitter<CustomEvent<{ value: string | number | undefined }>>;
+  ionChange: EventEmitter<CustomEvent<IIonPickerColumnPickerColumnChangeEventDetail>>;
 }