onScroll Event doesn't fires
gyto23 opened this issue ยท 5 comments
I just start using hook portals, which is working great for me. However, there an issue that I found with my setup is that onScroll
does not fired by react-useportal
. Per documentation we can add any html event handlers, but it doesnt fire as needed. For example:
const DropdownButton = (
{}
) => {
const onOpen = ({ event, portal, targetEl }) => {
console.log(event, portal, targetEl)
const { top, left } = targetEl.getBoundingClientRect();
portal.current.style.cssText = `
position: absolute;
top: ${top - portal.current.offsetHeight - 10}px;
left: ${left}px;
`;
};
const {
ref,
togglePortal,
isOpen,
Portal
} = usePortal({
onOpen,
onScroll: ({ event, portal, targetEl }) => {
console.log(event, portal, targetEl)
},
onWheel: ({ event, portal, targetEl }) => {
console.log(event, portal, targetEl)
},
});
return (
<>
<button
ref={ref}
onClick={e => togglePortal(e)}
>
test
</button>
{isOpen && (
<Portal>test1</Portal>
)}
</>
);
};
export default DropdownButton;
My goal is to update the position of the dropdown when user start scrolling in the window, so it doesnt float in the screen by itself. Something similar does popover which fires event when we start scrolling in the window.
I will take a look at this in the morning!
Try not putting a ref on there for now to see if that works.
@alex-cory here is example https://codesandbox.io/embed/nifty-fermat-no1yb
Click on the button, and start scroll, check the console. onWheel
and onScroll
dont have any feedback
Closing this. Feel free to open it back up if the issue persists