Skip to content

fix(picker-column): fallback to elementFromPoint for iOS 16 Shadow DOM bug #30479

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 21 additions & 1 deletion core/src/components/picker-column/picker-column.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -376,7 +376,27 @@ 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 === undefined) {
const fallbackActiveElement = referenceNode.elementFromPoint(centerX, centerY);

if (fallbackActiveElement?.tagName === 'ION-PICKER-COLUMN-OPTION') {
newActiveElement = fallbackActiveElement as HTMLIonPickerColumnOptionElement;
}
}

if (activeEl !== undefined) {
this.setPickerItemActiveState(activeEl, false);
Expand Down
Loading