Capture events from child of Portal
Hey I need some advice. I want to captured an event of an element inside a Portal by the parent element of the portal.
But in the test file the event is not captured at all.
If I remove/comment out the Portal it does work but with the Portal it doesn't.
Does anyone have a solution for this?
function App() {
return (
<>
<div
//@ts-ignore
oncapture:pointerdown={pointerDown}
>
<Portal>
<button data-testid="btn" />
</Portal>
</div>
</>
);
}
5 Replies
i think what's happening is that using this form of listener
oncapture:pointerdown is hooking directly into the html listener, and since the button is not a child of that element the event doesn't bubble up
if you were to use onPointerDown it'd work because solid is doing extra work to bubble up the event to parent components too not just DOM parents
but i guess you need the captured pointer down event for a reason
why not add the listener on the button directly?This is a simplfied example from a test file. What I am working on is to transfer a library with some components from React to Solid. The component uses a Portal component and then renders the children inside the Portal. So I don't have control over what is placed inside the portal. But I need to capture the event on the parent outside of the portal. In the React lib the onPointerDownCapture event is being used and works as expected with the portal as well.
a bit hacky but you could add the event listener manually on the portal element
by manually i mean doing
portalEl.addEventListener("pointerdown"... in the onMountI tested to use the regular events onPointerDown as you mentioned the events are properly delegated. So this seems to work for me. Some more context to that is in this github issue for anyone stumbling over this chat:
https://github.com/solidjs/solid/issues/1786#issuecomment-1694589801
GitHub
event.stopPropagation is not working · Issue #1786 · solidjs/solidDescribe the bug I used event.stopPropagation in the event in the application, but the event can still be executed outside the application. Your Example Website or App https://codesandbox.io/p/sand...
Thanks @andi 🙏