fix(Popover): move position with target when in scroll container

[jrood]

Overview

Move popover position with target when in a scroll container

We currently handle repositioning the popover so that it moves with the target when a user scrolls at the window level. However, we were not handling scrolling if the popover was within a container that scrolls while the window scroll is stationary (e.g. for narrative content on the LE). This PR introduces behavior to find the parent/ancestor element that is scrollable and ensure that the popover position is updated each time a scroll event is fired on that parent element.

PR Checklist

• Related to designs for Docs LE Tooltips
• Related to JIRA ticket: REACH-2716
• I have run this code to verify it works
• This PR includes unit tests for the code change
• This PR includes testing instructions tests for the code change
• The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

• Open packages/styleguide/stories/Molecules/Popover/Popover.examples.tsx
• Edit the PopoverExample so that it returns something in a scroll container, e.g.

return (
  <div style={{overflow: 'auto', maxHeight: '200px' }}>
    {'abcde'.split('').map(x => <div>{x}</div>)}
    <Box ref={activeElRef}>
      <FillButton onClick={toggleOpen}>Open Popover</FillButton>
    </Box>
    <FlexBox>
      <Popover
        {...rest}
        isOpen={open}
        targetRef={activeElRef}
        onRequestClose={() => setOpen(false)}
      >
        <FlexBox flexDirection="column" p={p} alignItems="flex-start">
          <Box mb={8}>Hooray!</Box>
          <FillButton size="small" onClick={() => setOpen(false)}>
            Close Popover
          </FillButton>
        </FlexBox>
      </Popover>
    </FlexBox>
    {'abcde'.split('').map(x => <div>{x}</div>)}
  </div>
);

• Run storybook
• Go to http://localhost:6006/?path=/story/molecules-popover--popover
• Click "Open Popover"
• Verify that the popover moves with the target during scroll

PR Links and Envs

Repository	PR Link	PR Env
Monolith	Monolith PR	Monolith Preview Env
Monorepo	Monorepo PR	Portal Preview Env
		LE Preview Env

[dreamwasp]

all lgtm so far - can you link where this is used in the LE so i can test the fix in context?

[jrood]

@dreamwasp for sure. If you go to the Learn SQL course and tab onto the first "SQL" link, you should see a Docs tooltip. If you scroll while that tooltip is open, it will move with the target with this fix (https://tayra.codecademy.com/courses/learn-sql/lessons/manipulation/exercises/sql?PR_ENV=le-pr-2330) but not in prod (https://www.codecademy.com/courses/learn-sql/lessons/manipulation/exercises/sql)

[codecademydev]

📬Published Alpha Packages:

@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]

[codecademydev]

🚀 Styleguide deploy preview ready!

https://64961aa4f7eb8207dd56bab9--gamut-preview.netlify.app

Deploy Logs

[dreamwasp]

noticed a small bug when you scroll to the top of the container but that being said, this is a huge improvement on the current behavior so am down for you to ship as is even if you can't tweak it. great work!

Screen.Recording.2023-06-27.at.11.26.48.AM.mov