Popover problem when scrolling page

[chertik77]

Bug report

Current Behavior

https://github.com/radix-ui/primitives/assets/129002577/6a1d9717-7eca-42f6-8b93-958d79161c1c

I expect popup to be closed while scrolling

Close popover when user scrolls page

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-popover	1.0.7
React	n/a	18.2.0
Browser		Chrome
Assistive tech		-
Node	n/a	n o
npm/yarn		yarn
Operating System	Mac

[SandipGyawali]

@chertik77 if you're not working on this issue can you assign it to me ? I am willing to contribute.

[chertik77]

@chertik77 if you're not working on this issue can you assign it to me ? I am willing to contribute.

hey, i dont think thats my responsibility to assign u to this issue. Also, I ain't owner or collaborator of this repo

[joaom00]

I think you are looking for hideWhenDetached prop?

[chertik77]

I think you are looking for hideWhenDetached prop?

Doesn't work

[linkb15]

@chertik77

you can add scroll event, check if direction is up and close the popover manually right?

https://stackoverflow.com/a/62497293

const [open, setOpen] = useState(false)

const [scrollDir, setScrollDir] = useState("scrolling down");

useEffect(() => {
  const threshold = 0;
  let lastScrollY = window.pageYOffset;
  let ticking = false;

  const updateScrollDir = () => {
    const scrollY = window.pageYOffset;

    if (Math.abs(scrollY - lastScrollY) < threshold) {
      ticking = false;
      return;
    }
    setScrollDir(scrollY > lastScrollY ? "scrolling down" : "scrolling up");
    lastScrollY = scrollY > 0 ? scrollY : 0;
    ticking = false;
  };

  const onScroll = () => {
    if (!ticking) {
      window.requestAnimationFrame(updateScrollDir);
      ticking = true;
    }
  };

  window.addEventListener("scroll", onScroll);
  console.log(scrollDir);

  return () => window.removeEventListener("scroll", onScroll);
}, [scrollDir]);

useEffect(() => {
  if (scrollDir === "scrolling up") {
	setOpen(false)
  }
}, [scrollDir])

...