From 941175658cb6e4f7141f5d52fb2511a9570e2719 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 11 Jun 2025 14:06:23 -0700 Subject: [PATCH 1/2] fix(picker-column): fallback to elementFromPoint for iOS 16 Shadow DOM bug Co-authored-by: Vilhelm Josander <5067135+vilhelmjosander@users.noreply.github.com> --- .../components/picker-column/picker-column.tsx | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx index 0b4f57dd8a1..a6dbc151b8b 100644 --- a/core/src/components/picker-column/picker-column.tsx +++ b/core/src/components/picker-column/picker-column.tsx @@ -376,7 +376,23 @@ export class PickerColumn implements ComponentInterface { * elementsFromPoint can returns multiple elements * so find the relevant picker column option if one exists. */ - const newActiveElement = elementsAtPoint.find((el) => el.tagName === 'ION-PICKER-COLUMN-OPTION'); + let newActiveElement = elementsAtPoint.find((el) => el.tagName === 'ION-PICKER-COLUMN-OPTION'); + + /** + * TODO(FW-6594): Remove this workaround when iOS 16 is no longer + * supported. + * + * If `elementsFromPoint` failed to find the active element (a known + * issue on iOS 16 when elements are in a Shadow DOM and the + * referenceNode is the document), a fallback to `elementFromPoint` + * is used. While `elementsFromPoint` returns all elements, + * `elementFromPoint` returns only the top-most, which is sufficient + * for this use case and appears to handle Shadow DOM retargeting + * more reliably in this specific iOS bug. + */ + if (!newActiveElement) { + newActiveElement = referenceNode.elementFromPoint(centerX, centerY) as HTMLIonPickerColumnOptionElement; + } if (activeEl !== undefined) { this.setPickerItemActiveState(activeEl, false); From b46b6a96ecdf4630c375a82f707096bfe7e4e1e8 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Thu, 12 Jun 2025 13:36:01 -0700 Subject: [PATCH 2/2] fix(picker-column): check fallback type --- core/src/components/picker-column/picker-column.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx index a6dbc151b8b..3393cadf6e0 100644 --- a/core/src/components/picker-column/picker-column.tsx +++ b/core/src/components/picker-column/picker-column.tsx @@ -390,8 +390,12 @@ export class PickerColumn implements ComponentInterface { * for this use case and appears to handle Shadow DOM retargeting * more reliably in this specific iOS bug. */ - if (!newActiveElement) { - newActiveElement = referenceNode.elementFromPoint(centerX, centerY) as HTMLIonPickerColumnOptionElement; + if (newActiveElement === undefined) { + const fallbackActiveElement = referenceNode.elementFromPoint(centerX, centerY); + + if (fallbackActiveElement?.tagName === 'ION-PICKER-COLUMN-OPTION') { + newActiveElement = fallbackActiveElement as HTMLIonPickerColumnOptionElement; + } } if (activeEl !== undefined) {