onScroll Event doesn't fires

[gyto23]

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.

[alex-cory]

I will take a look at this in the morning!

[alex-cory]

Try not putting a ref on there for now to see if that works.

[gyto23]

@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

[alex-cory]

This should fix your problem. Will merge it today

[alex-cory]

Closing this. Feel free to open it back up if the issue persists