[BUG] applicationinsights-clickanalytics-js extension does not work within @fluentui/react "Panel", "Modal", "Callout" components

[vkoman]

Description/Screenshot I am using data-custom-id="my-custom-value" attr on a <button> inside FluentUI Panel or Callout components. And particularly for this scenario, events are not logged in AppInsight. Everything works as expected if I place <button> outside of these components, in any other place. I have tried to debug the AutoCaptureHandler.js source code, and I can see that mousedown event handler is not raised for buttons that are located inside Panel or Callout components ( _processClick function is not called). https://github.com/microsoft/ApplicationInsights-JS/blob/52cdf2e266cf95e3751a4341f22b34b0e6596347/extensions/applicationinsights-clickanalytics-js/src/handlers/AutoCaptureHandler.ts#L31

Here is a link to FluentUI components https://github.com/microsoft/fluentui/blob/dab45a2afe609709735b9b6e604a1af40d50e809/packages/react/src/components/Panel/Panel.base.tsx

Steps to Reproduce Does not work

<Panel>
   <button data-custom-id="my-custom-value">My button</button>
</Panel>

Works

<>
  <button data-custom-id="my-custom-value">My button</button>
  <Panel>
     <span>some content</span>
  </Panel>
</>

Expected behavior applicationinsights-clickanalytics-js library to be compatible with @fluentui/react Panel, Callout components

[vkoman]

in regards to this here is a ticked in FluentUi repository there is an issue that components are not automatically raising events from inside there is a setting that enables raising events

https://github.com/microsoft/fluentui/issues/20073

[MSNev]

~~I think you'll find (unless you are using <= IE8 that it's actually listening to the click and keyup events (navigator.appVersion.indexOf("MSIE") !== -1) ? "click"~~ Yeh, I got the logic around the wrong way (again sigh) -- As @vkoman points out below its always mousedown unless it's IE

Not that, that helps. I suspect the root cause of the issue is that something is stopping the propagation of the events to window (which is where the event is being registered) -- for the AutoCaptureHandler... If that is the case, I'm not sure there is an easy solution within the SDK as it would mean that we would need to listen to DOM changes (somehow in a cross browser compat way) and attach to individual elements.. I wasn't involved in the creation of this plugin so I'll need to review the code a bit more and discuss with some people internally.

[vkoman]

it is always mousedown in my case, never click (navigator.appVersion.indexOf("MSIE") !== -1) is always false but it does not really matter, I agree that the root cause is that events are not propagated from FluentUI components

[github-actions[bot]]

This Issue will be closed in 30 days. Please remove the "Stale" label or comment to avoid closure with no action.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.