fix: don't track clicks on disabled elements

[iamacook]

What it solves

Resolves #2405

How this PR fixes it

Elements wrapped in Track now check whether the children is targetted. If not, it means that the clicked target is disabled and, as such, not tracked.

How to test it

Click the following elements whilst disabled and observe no tracking event for them:

• Adding an owner
• Removing an owner
• Replacing an owner
• Change policies
• Adding a spending limit
• Removing a spending limit
• "Send" button in the assets table
• "Send" from the address book
• "Add to batch" from a tx from
• "New transaction" from the Add to batch section that opens from the topbar
• "Add a new tx" that shows when there are already batched tx in the menu displayed from the top bar
• "Confirm batch" from that same menu

Checklist

• I've tested the branch on mobile 📱
• I've documented how it affects the analytics (if at all) 📊
• I've written a unit/e2e test for it (if applicable) 🧑‍💻

[github-actions]

Branch preview

✅ Deploy successful!

https://disabled_tracking--walletweb.review-wallet-web.5afe.dev

[github-actions]

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

• Result: ✅ success
• Annotations: 0 total

---

^{Report generated by eslint-plus-action}

[katspaugh]

What if a nested element intercepts the click? Will it always bubble up to trackEl?

[iamacook]

Yes. It seems to work nicely in my tests, even with stopPropagation on nested elements.

[usame-algan]

I am still seeing events when I click on a disabled button. Depending on where I click the target could be the icon inside the button or another child element so the condition would still be true I think.

[iamacook]

I am still seeing events when I click on a disabled button.

I'm converting this to a draft whilst I investigate this further.

[iamacook]

@katspaugh, @usame-algan, I've adjusted the approach to check whether child elements are disabled. Wdyt?

[usame-algan]

What about the previous idea we discussed of passing a disabled flag to the Track component? There are not that many buttons that can be disabled and if they are wrapped in Track we would have access to their disabled flag anyway so it would be a simple change. Calling querySelectorAll seems like a workaround / unconventional way of doing this in React.

[iamacook]

What about the previous idea we discussed of passing a disabled flag to the Track component? There are not that many buttons that can be disabled and if they are wrapped in Track we would have access to their disabled flag anyway so it would be a simple change. Calling querySelectorAll seems like a workaround / unconventional way of doing this in React.

Whilst I tend to agree, it is hard to enforce. As we have the input ref, I don't see it as a workaround.

[francovenica]

LGTM

I've checked the buttons in the list.
Most of them now open the modal to connect if you are disconnected, so the "Open modal" event is tracked, which is expected.
If you are connected with no owner, nothing is tracked when you click the buttons/links as expected
If you are the owner the tracking works as normal, each button triggering the corresponding event as expected