bug: Clicking on edge of <ion-input fill=“outline”> causes a (click) event to fire twice

[CallumMcFadgen]

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

v7.x

Current Behavior

We have (click) events on some ion-inputs in forms to launch a modal like this:

<ion-input class="modal-input" readonly="true" label="Delivery date" labelPlacement="stacked" fill="outline" (click)="presentDateTimePickerModal()">

We’ve recently switched to the fill="outline" style which produces a strange behaviour. If you click on the edge of the ion-input, where the new fill outline border shows, it launches the (click) event twice! Clicking in the middle of the ion-input fires once as expected.

See here on click area:

Is this a known bug? and is there any way to resolve and keep using the ion-input fill=outline?

Thanks

Callum

Expected Behavior

Would expect the click event to fire once when the ion-input is clicked, whether on the edge or the center.

Steps to Reproduce

1. Create a form control in .html file like so: <ion-input readonly="true" label="Test" labelPlacement="stacked" fill="outline" (click)="test()">
2. Create a function in .ts file like so: public test() { console.log('test'); }
3. Click at the edge of the input which should fire the function twice.

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 7.1.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 7.6.2
@angular-devkit/build-angular : 16.2.10
@angular-devkit/schematics : 16.2.10
@angular/cli : 16.2.10
@ionic/angular-toolkit : 9.0.0

Capacitor:

Capacitor CLI : 4.8.1
@capacitor/android : 5.5.1
@capacitor/core : 5.5.1
@capacitor/ios : 5.5.1

Utility:

cordova-res : not installed globally
native-run (update available: 2.0.0) : 1.7.4

System:

NodeJS : v18.15.0 (/usr/local/bin/node)
npm : 9.5.0
OS : macOS Unknown

Additional Information

No response

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. The problem here is clicking <label> (i.e. the label text) generates a click event that bubbles up. However, clicking the <label> element also dispatches a click on the input which then bubbles up as well. As a result, you have two events generated.

This looks to be the same as #28784. We've decided not to suppress this behavior because it is the native browser behavior and can reproduced outside of Ionic. I don't know what you are trying to accomplish in your app, but you can use ionFocus to detect when the input is focused. You can also use ionInput or ionChange to detect when the input value changes.

[ionitron-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.