Access to browser element native events

[Devmond]

Hi All,

I am working on a low code implementation/integration for the Spectrum library on the Solvent platform as shown here:
https://www.youtube.com/watch?v=nuA_QVVCFy8

The implementation requires the ability to essentially hijack browser html element events during active composition then relinquish once user turns off composition mode.

It appears the Spectrum library cloaks away the browser events for components and instead provides hooks (useDrag...etc) and props (onPress..etc) to expose some of these events.

Is there a simple trick to circumvent this limitation and just allow access to all events? Is there some flag that would for instance allow me to just bind to the drag,drop,mouseover..etc events like any plain html element should be able to?

I understand the architecture is meant to support accessibility, I am hoping there is the options to turn those accessibility requirements off and allow the components to respond to browser mouse/pointer events in the standard and expected manner.

[snowystinger]

Thanks for the discussion. I suggest starting with this series https://react-spectrum.adobe.com/blog/building-a-button-part-1.html to see why we're "cloaking away" the browser events.

I'm not quite sure I followed the video + explanation, I'm not sure what composition mode is in the video. And I don't know why the events are needed for it.

That said, the short answer is that we don't allow to turn them off as then the components would not be accessible and probably wouldn't work at all in many cases.

[Devmond]

Thanks for the follow up.

My request is not to change anything about how the components are designed but rather I want to know if there is any sort of off-ramp for special cases like my need. Even if it is some non-supported hack that'll achieve the desired result, I'll take it. This requirement is only for when a developer is actively building an app (via drag-n-drop), it will not impact how the components actually behave at runtime.

By composition it just means the drag-n-drop app composer takes over certain events on the components to allow the developer to visually manipulate them. ie drag/drop to reposition a component, mouseover to reveal meta-data about the component or trigger some other action such as changing the value of an attribute.

Without being able to bind directly to the component events, the only other alternative is to dynamically wrap some transparent div component around all components and attach composition support events to them, this will likely break other things.

In any case if such an option isn't available then that answers my question.

[snowystinger]

Ah, I see, they are dragging the real implementation around?
You could place an invisible element over it and intercept all events and not allow focus of the actual component then. Would that suit your needs?

[Devmond]

Yes the components will be visually drag-n-drop to build/compose apps.

I'll experiment with the usePress hook and see if some combo of its event can get the job done.

Thanks for the support.