phase2 / outline

Tooling infrastructure for modern web component development.
https://outline.phase2tech.com
MIT License
128 stars 27 forks source link

[Bug]: LinkedBlockController._handleClicks() causes extra click event #309

Closed danmuzyka closed 2 years ago

danmuzyka commented 2 years ago

Describe the bug On components that use this controller, clicking on the component results in two click events: the one that the user actually initiated, and the one programmatically triggered with this._getLink()?.click();. The double click events can interfere with web analytics tracking.

To Reproduce Steps to reproduce the behavior:

  1. Load a page with a component that uses the LinkedBlockController.
  2. Open the browser's developer tools console and paste in this code, then press enter: document.addEventListener('click', event => {event.preventDefault(); console.log(event)});
  3. Click on the component.
  4. You will see two click events registered in the console, one of which has an isTrusted property with a value of true (the click event triggered by the user's action), the other of which has an isTrusted property with a value of false (the click event generated programmatically by this._getLink()?.click();).

Expected behavior Only one click event is bubbled when a user clicks on a component that uses this controller. Specifically, the event that is generated programmatically by this._getLink()?.click(); should be bubbled and detected by analytics.

Additional context This fix, when coupled with solutions to enable Google Analytics to track events on the Shadow DOM, will help make click events function correctly in Google Analytics.