diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index 3607b103221..b08160c1a28 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -831,6 +831,15 @@ export class Input implements ComponentInterface { */ ev.preventDefault(); }} + onFocusin={(ev) => { + /** + * Prevent the focusin event from bubbling otherwise it will cause the focusin + * event listener in scroll assist to fire. When this fires, focus will be moved + * back to the input even if the clear button was never tapped. This poses issues + * for screen readers as it means users would be unable to swipe past the clear button. + */ + ev.stopPropagation(); + }} onClick={this.clearTextInput} > diff --git a/core/src/utils/input-shims/hacks/scroll-assist.ts b/core/src/utils/input-shims/hacks/scroll-assist.ts index 01f810f3295..293f1d1d26d 100644 --- a/core/src/utils/input-shims/hacks/scroll-assist.ts +++ b/core/src/utils/input-shims/hacks/scroll-assist.ts @@ -124,7 +124,7 @@ export const enableScrollAssist = ( const focusOut = () => { hasKeyboardBeenPresentedForTextField = false; win?.removeEventListener('ionKeyboardDidShow', keyboardShow); - componentEl.removeEventListener('focusout', focusOut, true); + componentEl.removeEventListener('focusout', focusOut); }; /** @@ -155,15 +155,15 @@ export const enableScrollAssist = ( ); win?.addEventListener('ionKeyboardDidShow', keyboardShow); - componentEl.addEventListener('focusout', focusOut, true); + componentEl.addEventListener('focusout', focusOut); }; - componentEl.addEventListener('focusin', focusIn, true); + componentEl.addEventListener('focusin', focusIn); return () => { - componentEl.removeEventListener('focusin', focusIn, true); + componentEl.removeEventListener('focusin', focusIn); win?.removeEventListener('ionKeyboardDidShow', keyboardShow); - componentEl.removeEventListener('focusout', focusOut, true); + componentEl.removeEventListener('focusout', focusOut); }; };