bug: ionic/react Duplicate firing of onClick handlers during rapid click in Firefox responsive design mode

[benallfree]

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

This only happens in Firefox (not Chrome). Here's a visual demo: https://user-images.githubusercontent.com/1068356/188532214-96950c3a-236a-49d7-87ec-5072ca97adf4.mp4

Using the following code, or using this Codesandbox demo (https://codesandbox.io/s/determined-bohr-s30zng?file=/src/App.tsx:913-1244&resolutionWidth=320&resolutionHeight=675).

Open the Firefox debugger and set the device size to iPhone or something similar. Observe that rapid clicks produce duplicate onClick events.

const App: React.FC = () => {
  const handleClick = (() => {
    let i = 0;
    return () => {
      i++;
      console.log(i);
    };
  })();

  return (
    <IonApp>
      <IonPage>
        <IonContent>
          <IonButton onClick={handleClick}>Click me</IonButton>
        </IonContent>
      </IonPage>
    </IonApp>
  );
};

Expected Behavior

One onClick event per click

Steps to Reproduce

See above

Code Reproduction URL

https://codesandbox.io/s/determined-bohr-s30zng?file=/src/App.tsx:913-1244&resolutionWidth=320&resolutionHeight=675

Ionic Info

Ionic:

   Ionic CLI       : 6.20.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 6.2.5

Capacitor:

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

Utility:

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

System:

   NodeJS : v16.13.0 (/usr/local/bin/node)
   npm    : 8.14.0
   OS     : macOS Monterey

Additional Information

Could be related to #17321?

[liamdebeasi]

Thanks for the report. This may be a browser quirk as I am able to reproduce this outside of Ionic: https://codesandbox.io/s/nice-dawn-f1l43c?file=/src/App.tsx

Is this issue impacting any apps your have running in production?

[benallfree]

Hmm, I'm not seeing the duplicate events in the sample you provided, even when I put it in responsive mode. When I run https://f1l43c.csb.app/ with the FF debugger open in responsive mode, I get the expected behavior of one event per click.

As far as prod impact, I'd say negligible. It's a production app, but it seems unlikely that people would be running it with the Firefox debugger open in mobile/responsive mode. I only noticed because I run that way for responsive testing.

I haven't tested for this behavior on a mobile device running Firefox.

Ionic uses webkit for native apps anyway, right?

Thanks for the quick look!

[liamdebeasi]

As far as prod impact, I'd say negligible. It's a production app, but it seems unlikely that people would be running it with the Firefox debugger open in mobile/responsive mode. I only noticed because I run that way for responsive testing.

Thanks! This helps better identify the impact. At this point, I am able to reproduce this issue outside of Ionic, so I am not sure this is something we are able to fix. It might be better to file some feedback on Mozilla's Bug Reporter.

I will note that I was missing some necessary code in my original reproduction that I have since added:

double-click-firefox.mov

I did notice that this issue only happens when the "Touch simulation" button is enabled, further indicating that this may be a quirk with the mobile simulation on Firefox.

---

Ionic uses webkit for native apps anyway, right?

WebKit is only used on iOS. Android will use Chromium when running as a standalone native app.

[benallfree]

Ok thanks, I think we can close this.

[benallfree]

Filed with Mozilla https://bugzilla.mozilla.org/show_bug.cgi?id=1789674

[liamdebeasi]

Thanks for filing a ticket!

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