[Bug]: sp-action-button logs two click events

[Ben-Zahler]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

sp-action-button

Library version

1.7.0

Expected behavior

A click on an sp-action-button triggers exactly on event.

Actual behavior

The sp-action-button logs two click events.
One event has "isTrusted = false, the second one has isTrusted true.

This is not so much an issue for regular links (may actually impact analytics), but it's causing duplicate downloads when there is a "download" attribute.

Screenshots

No response

What browsers are you seeing the problem in?

Chrome, Firefox

How can we reproduce this issue?

see sample code below.

Sample code or abstract reproduction which illustrates the problem

          <sp-action-button @click=${(e) => console.log(`click handler, event is trusted: ${e.isTrusted}`)} 
                            href="https://partners.adobe.com/channelpartnerassets/assets/public/public_1/aem_assets_dynamic_media_capability_spotlight_ue.pdf"
                            download="Adobe Experience Manager Assets Dynamic Media Capability Spotlight.pdf">
            <sp-icon-download/>
          </sp-action-button>

Severity

None

Logs taken while reproducing problem

click handler, event is trusted: false
click handler, event is trusted: true

Would you like to track this issue in Jira?

• Yes, please tell me the ticket number!

[najikahalsema]

SWC-1338

related to #5727 #5511

[Rajdeepc]

@Ben-Zahler So this is what is happening:
When we click on sp-action-button with an href attribute, two click events were fired:

1. A synthetic click (isTrusted: false) from anchorElement.click() that bubbles up through the shadow DOM
2. The original user click (isTrusted: true)

This might be causing duplicate downloads and double analytics counts. What we can do here is to filter out the synthetic click by checking if it has originated from the anchor element or not.
In handleClickCapture we can check like this

if (
    !mouseEvent.isTrusted &&
    this.anchorElement &&
    event.composedPath()[0] === this.anchorElement
) {
    event.stopPropagation();
    return false;
}

We are using event.composedPath()[0] instead of event.target because Shadow DOM retargets event.target as events cross shadow boundaries. This will allow keyboard-triggered clicks which originate from the button to still work while blocking the duplicate synthetic click from the anchor.