Skip to content

React Spectrum support in RUM #252

Open
@igor-grubic

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 the rum-data-source attribute instead, however due to how the current solution is coded, element.id might have precedence over rum-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.

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions