Description
Is your feature request related to a problem? Please describe.
Apps that leverage React Spectrum components will encounter a couple of issues with Rum enchancer:
- Problem 1
element.id
: React Spectrum assigns dynamically generated IDs to it's elements, which are not very useful for the purpose of tracking. We can leverage therum-data-source
attribute instead, however due to how the current solution is coded, element.id might have precedence overrum-data-source
when traversing the parent tree in search of the first meaningful element identifier. eg:
<div rum-data-source="my-component" >
<div id="12345"> Click me </div>
</div>
// `12345` will have priority over the data-attribute.
- Problem 2 click events: React Spectrum uses a custom onClick event called onPress, which prevents the native onClick. Due to this, any React Spectrum components leveraging onPress will not be captured.
Describe the solution you'd like
Problem 1: Since in React we do not care about IDs, we could ignore them instead, as long as the host app adds meaningful attributes. see PR
Problem 2: A possible solution would be to listen to the onClick event on the capture even, rather than the bubble event. eg:
document.addEventListener("click", handler, {capture: true});
Describe alternatives you've considered
Problem 1: instead of ignoring all element.ids, we could aim at React Spectrum generated ids directly:
if (element.id.startsWith('react-aria')) [...] //ignore element.id and keep searching
This would be more in line with the current implementation.
However based on the team Spectrum, there is no reliable way of identifying React Spectrum IDs.
Additional context
Add any other context or screenshots about the feature request here.