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.