bug: scroll assist causes duplicate click and focus events to be fired

[KWIPPED]

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

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

When ion-input and ion-item gains focus, an ionBlur event is fired incorrectly.

Action	Events Fired	Status
Click inside ion-input (input gains focus)	1. ionFocus, 2. ionBlur, 3. ionFocus	Incorrect
Click inside ion-input (input loses focus)	1. ionBlur	Correct

Expected Behavior

Action	Events Fired
Click inside ion-input (input gains focus)	1. ionFocus
Click inside ion-input (input loses focus)	1. ionBlur

Steps to Reproduce

1. Checkout the provided code
2. run ionic serve
3. Open inspector
4. Click in ion-input on the screen

Code Reproduction URL

https://github.com/KWIPPED/ionic-event-bug

Ionic Info

Ionic:

Ionic CLI : 6.19.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 6.1.2

Capacitor:

Capacitor CLI : 3.5.0
@capacitor/android : not installed
@capacitor/core : 3.5.0
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : 1.5.0

System:

NodeJS : v14.16.0 (/usr/local/bin/node)
npm : 6.14.11
OS : macOS Monterey

Additional Information

No response

[liamdebeasi]

Thanks for the issue. Which browser/version are you testing this on?

[KWIPPED]

On Chrome - Version 100.0.4896.127 (Official Build) (x86_64)

[liamdebeasi]

Did you push your complete reproduction to the linked repo? I only see a blank starter application.

[KWIPPED]

No I didn't. I am so sorry. Now I have pushed it. Simple code in HomePage.vue. ONE IMPORTANT NOTE. Just noticed it. When the inspector is open in Chrome, toggle the device toolbar and select an iPhone. (I used iPhone12). If the behavior does not show at first, reload the page (which will present the iPhone identity to Ionic).

[liamdebeasi]

Thanks, I can reproduce this behavior. This problem is related to our scroll assist utility. The scroll assist utility ensures that inputs are not covered by the keyboard when the keyboard opens. It works by cloning the input and temporarily moving the original input offscreen while the content scrolls the input into the correct place.

This is done by setting pointer-events: none on ion-input and translating the input offscreen:

ionic-framework/core/src/utils/input-shims/hacks/common.ts

Lines 49 to 50 in 780f16d

	componentEl.style.pointerEvents = 'none';
	inputEl.style.transform = `translate3d(${tx}px,${inputRelativeY}px,0) scale(0)`;

Unfortunately, this causes the browser to blur the input. As a result, we manually call focus to focus the input: https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/input-shims/hacks/scroll-assist.ts#L66

This results in the duplicate focus and additional blur events you are seeing.

[mohamednagy]

@liamdebeasi i'm in v8 and experiencing same problem, is there a solution for that ?

[liamdebeasi]

Hi there,

I do not work for Ionic anymore, so I won't be much help in getting this resolved. Sorry about that!