bug: icon click in item focuses input

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

We have an input in our app which we now want to extend by a camera scanner, so we added an icon at the iiems end to open the scanner. Clicking this icon will focus the input and show the keyboard.

This should be change-able by preventing the click event, but that doesn’t work 🤔

Expected Behavior

When using

event.preventDefault();
event.stopPropagation();

the input should not focus

Steps to Reproduce

See attached Stackblitz, just click on the camera icon

Code Reproduction URL

https://stackblitz.com/edit/ionic6-angular13-ve7khj?file=src%2Fapp%2Fapp.component.html

Ionic Info

From the app:

Ionic:

Ionic CLI : 6.20.1 (/Users/hans/.nvm/versions/node/v16.14.2/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 6.2.3 @angular-devkit/build-angular : 14.1.3 @angular-devkit/schematics : 14.1.3 @angular/cli : 14.1.3 @ionic/angular-toolkit : 7.0.0

Capacitor:

Capacitor CLI : 4.0.1 @capacitor/android : 4.0.1 @capacitor/core : 4.0.1 @capacitor/ios : 4.0.1

Cordova:

Cordova CLI : 10.0.0 (cordova-lib@10.1.0) Cordova Platforms : not available Cordova Plugins : not available

Utility:

cordova-res : 0.15.4 native-run (update available: 1.7.0) : 1.6.0

System:

Android SDK Tools : 25.2.3 (/Users/hans/Library/Android/sdk) ios-deploy : 1.10.0 NodeJS : v16.14.2 (/Users/hans/.nvm/versions/node/v16.14.2/bin/node) npm : 8.17.0 OS : macOS Monterey Xcode : Xcode 13.4.1 Build version 13F100

Additional Information

No response

[liamdebeasi]

I believe buttons in WebKit/Safari do not receive focus, so that could be why this behavior is happening. Once we complete the form component migration (https://github.com/ionic-team/ionic-framework/discussions/25661) I think we will likely remove the delegatesFocus feature as it was only added for form components.

edit: Also in Ionic 7 you will be able to use the input without ion-item, so this issue may be easier to work around once that change ships.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.