bug: input clear button is activated on swipe

[mfrey-WELL]

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

Current Behavior

Starting a swiping (scrolling) gesture on the clear-input icon of an ion-input element clears the input field.

Expected Behavior

When I start scrolling on the clear icon it should not trigger the input clear event.
Same as with the input where swiping does not select it.

Steps to Reproduce

1. Run the example on an android device.
2. Scroll the list of inputs vertically by applying the gesture on the clear icons.

Code Reproduction URL

https://github.com/mfrey-WELL/ion-clear-input-demo

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (/Users/<>/.nvm/versions/node/v16.14.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.0.7
@angular-devkit/build-angular : 13.0.4
@angular-devkit/schematics : 13.0.4
@angular/cli : 13.0.4
@ionic/angular-toolkit : 5.0.3

Capacitor:

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

Utility:

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

System:

NodeJS : v16.14.0 (/Users/<>/.nvm/versions/node/v16.14.0/bin/node)
npm : 8.3.1
OS : macOS Monterey

Additional Information

Reproduced on a Pixel 3 API 30 (emulator) and real Pixel 3 API 31
Same behaviour on iOS (version unknown)

[liamdebeasi]

Thanks for the issue. This behavior happens because we clear the input when the clear button is activated via touchstart/mousedown: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/input/input.tsx#L484-L486

This was done to avoid blurring the input when the pointer is released. This is an old approach, so perhaps there is a better way to activate the button while preventing input blurring.

[liamdebeasi]

I have a dev build with a proposed fix if anyone is interested in testing:

npm install @ionic/[email protected]

[liamdebeasi]

Thanks for the issue. This has been resolved via #25825, and a fix will be available in an upcoming release of Ionic Framework. Please feel free to continue testing the dev build, and let me know if you run into any issues.

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