ScrollSmoother Issue with Radix/Shadcn Popover Component

[TimTh]

Hi - 

 

I'm having an issue using ScrollSmoother with the Shadcn Popover component. The problem is that when the popover trigger is below the fold it causes the parent section to scroll up so that both the trigger and the popover are below the viewport.  Expected behavior is no scrolling.  I also tested it with the underlying Radix component and get the same behavior. The issue does not occur when ScrollSmoother is removed.

 

Here is a demo on netlify, and here is the code in a public repository. There are three pages - one each showing the unexpected behavior with Shadcn and Radix, and one showing the expected behavior when ScrollSmoother is removed. 

 

I'm probably doing something dumb somewhere but can't spot it. Any help would be appreciated.  

 

Thank you for any direction you can provide, as always!

[Rodrigo]

Hey Tim!

 

Mhh yeah this looks like one that could be a bit complicated and there is a lot in here to go through and try to find what could be the cause of this:

https://github.com/radix-ui/primitives/blob/main/packages/react/popover/src/Popover.tsx

 

The one solution I could suggest as a temporary workaround while we look into this is to attach a click event to the button here:

<Popover>
  <PopoverTrigger asChild>
    <!-- HERE -->
    <Button variant="outline">Open popover</Button>
  </PopoverTrigger>
  <PopoverContent className="w-80 flex justify-center bg-indigo-900 text-center text-white border-indigo-500">
    Opening this popover made the section scroll up, didn&apos;t it?
  </PopoverContent>
</Popover>

That event handler should scroll the window to the bottom or the position of the button plus the height of the popover (if it's possible to get that of course). You can use ScrollSmoother's scrollTo() method:

https://gsap.com/docs/v3/Plugins/ScrollSmoother/scrollTo()

 

We'll look into this and try to find out what could be causing this issue, but is clearly something in that particular package (radix) since the other one works on top of those.

 

We'll keep you posted but I can't give you a timetable ATM I'm afraid, so hopefully the suggestion I made works.

[TimTh]

Hey Rodrigo - 

 

Thanks very much for looking into it. For now, I'm good just disabling ScrollSmoother for this one page of the site, but I'm keeping my fingers crossed that there's a solution as I really want to use it with Radix/Shadcn stuff lots in the future. No urgency from my side, but thanks for keeping me posted and do let me know if there is something I can do to help troubleshoot. 

 

As always I appreciate your quick response. GSAP forum support is the best, truly!