bug: ionChange not fired on iOS 16 devices for ion-picker

[Simon54]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

By scrolling the picker the value is not changed and the event is not fired on iOS devices with iOS 16 (used iPhone 8 Plus).

Expected Behavior

The event should fire and the value should change.

Steps to Reproduce

1. create a blank angular ionic project
2. Insert code as the documentation in the home.page.html,home.poge.ts and home.page.scss files: https://ionicframework.com/docs/api/picker#picker-in-modal
3. To check the bug add in home.page.ts one line to the onIonChange function:

  onIonChange(event: CustomEvent) {
    console.log("onIonChange fired!", event.detail.value) // ADD THIS LINE
    this.currentValue = event.detail.value;  
  }

4. Try on an Android device: you see in the console the ionChange event fired when value change
5. Try on an iOS device: nothing is fired when value change

Code Reproduction URL

https://github.com/losciur/ionic-bug-ion-column-picker

Ionic Info

Ionic:

Ionic CLI : 5.4.16 (/Users/simon/.npm/_npx/864a9e3c2cd0cf50/node_modules/ionic)

Capacitor:

Capacitor CLI : 6.1.0
@capacitor/core : 6.1.0

Utility:

cordova-res : 0.15.4
native-run : 2.0.0

System:

NodeJS : v22.3.0 (/usr/local/Cellar/node/22.3.0/bin/node)
npm : 10.8.1
OS : macOS Unknown

Additional Information

The code is from this closed issue: #29480

The issue was closed without it having been resolved, so I'm reopening it, because it is happening on an iPhone that has iOS 16 and should be supported, since these devices don't receive iOS 17.

I investigated the issue and it comes down to the elementsForPoint not returning the ion-picker-column-option on this devices for some reason. So I made a simple patch which would make it work, but it's probably a bit expensive:

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

let newActiveElement = elementsAtPoint.find((el) => el.tagName === 'ION-PICKER-COLUMN-OPTION');
if(!newActiveElement) {
    const contains = (rect,x,y)=>rect.x <= x && rect.y <= y && x <= rect.x + rect.width && y <= rect.y + rect.height
    newActiveElement = [...el.children].find(x=>contains(x.getBoundingClientRect(),centerX,centerY))
}
if (activeEl !== undefined) {
    this.setPickerItemActiveState(activeEl, false);
}

[Raphael-Schulz]

We are confronting the same issue as described in this Post in our React application. We need to go back to Ionic v7.x for now.

For us the problem is showing up in the IonDateTime component displayed in a Modal (which is using the IonPicker under the hood). We tried it on different devices and in the browser. We can confirm that it is only happening on iOS 16.x as described in this PR. For our case it is 100% necessarry to have the issue fixed as a lot of our users have these "older" device models.

[jfcere]

Before this gets closed for inactivity, is there any intention from the Ionic team to prioritize this regression problem?

[WheelyWonka]

Any news on that subject ? Thanks

[vilhelmjosander]

We have the exact same issue on iOS 16.7.x as well. Desperately need this to be fixed since thousands of our users have an iPhone 8 which cannot install iOS 17.

[JoaoHCopetti]

I'm using Vue and it's not being fired for any platform.

Inspecting with Vue Devtools I found out that it's not emitting the event, but rather accepting a prop ion-change, this is what I did in order to work:

<IonPicker>
      <IonPickerColumn
        :value="currentValue"
        :ion-change="{
          emit(value) {
            console.log(value) // Here you have access to the value whenever it gets changed
          },
        }"
      >
        <IonPickerColumnOption value="javascript">Javascript</IonPickerColumnOption>
        <IonPickerColumnOption value="typescript">Typescript</IonPickerColumnOption>
        <IonPickerColumnOption value="rust">Rust</IonPickerColumnOption>
        <IonPickerColumnOption value="c#">C#</IonPickerColumnOption>
      </IonPickerColumn>
    </IonPicker>

Edit: It seems it got fixed on Ionic 8.5.0, now it emits the correct @ion-change event

[ShaneK]

Hello! Is this still an issue in 8.5.0?

[Simon54]

Still happening, still not fixed.

[ShaneK]

Very interesting, I cloned your example repo and I'm running it in an iOS 16.4 emulator and it appears to be working? I think there was a bug in these versions of iOS that don't let you use the web inspector, but I added an alert to onIonChange and it appears to work as expected. Is it exactly iOS 16 that this is happening for you in?

Screenshot-2025-05-07.at.14.31.41.mp4