Fix Popover Nested Scrolling

CHANGELOG.md

@@ -1,6 +1,10 @@
 # Changelog
 
-### 1.0.3 (Unreleased)
+### 1.0.4 (Unreleased)
+
+- [#365](https://github.com/influxdata/clockface/pull/365): Fix attachment of `Popover` when trigger element is nested in a scrolling element
+
+### 1.0.3
 
 - [#360](https://github.com/influxdata/clockface/pull/360): Add gradients in the green-yellow & yellow-red spectrums to the `Gradients` enum
 - [#356](https://github.com/influxdata/clockface/pull/356): Fix bug causing `FormValidationElement` to render in error state before the user has interacted with anything

src/Components/Popover/Base/Popover.tsx

@@ -232,6 +232,7 @@ export const PopoverRoot = forwardRef<PopoverRef, PopoverProps>(
         position={position}
         contents={contents(handleHideDialog)}
         testID={testID}
+        onHide={handleHideDialog}
         color={color}
         style={style}
         type={type}

src/Components/Popover/Base/PopoverDialog.tsx

@@ -44,6 +44,8 @@ export interface PopoverDialogProps extends StandardFunctionProps {
   caretSize: number
   /** Adds reasonable styles to popover dialog contents so you do not have to */
   enableDefaultStyles: boolean
+  /** Allows the popover to dismiss itself when the trigger is no longer in view */
+  onHide: () => void
 }
 
 export type PopoverDialogRef = HTMLDivElement
@@ -55,6 +57,7 @@ export const PopoverDialog = forwardRef<PopoverDialogRef, PopoverDialogProps>(
       type,
       style,
       color,
+      onHide,
       testID,
       contents,
       position,
@@ -106,12 +109,27 @@ export const PopoverDialog = forwardRef<PopoverDialogRef, PopoverDialogProps>(
       'cf-popover--contents__default-styles': enableDefaultStyles,
     })
 
+    const hidePopoverWhenOutOfView = (
+      entries: IntersectionObserverEntry[]
+    ): void => {
+      if (!!entries.length && entries[0].isIntersecting === false) {
+        onHide()
+      }
+    }
+
+    const observer = new IntersectionObserver(hidePopoverWhenOutOfView)
+
     useLayoutEffect((): (() => void) => {
       handleUpdateStyles()
-      window.addEventListener('scroll', handleUpdateStyles)
+      observer.observe(triggerRef.current)
+      // The third argument in addEventListener is "false" by default and controls bubbling
+      // scroll events do not bubble by default so setting this to "true"
+      // allows the listener to pick up scroll events from nested scrollable elements
+      window.addEventListener('scroll', handleUpdateStyles, true)
       window.addEventListener('resize', handleUpdateStyles)
 
       return (): void => {
+        observer.disconnect()
         window.removeEventListener('scroll', handleUpdateStyles)
         window.removeEventListener('resize', handleUpdateStyles)
       }

src/Components/Popover/Documentation/Popover.stories.tsx

@@ -23,6 +23,7 @@ import {
   QuestionMarkTooltipRef,
 } from '../Composed/QuestionMarkTooltip'
 import {SquareButton} from '../../Button/Composed/SquareButton'
+import {DapperScrollbars} from '../../DapperScrollbars/DapperScrollbars'
 
 // Types
 import {
@@ -47,6 +48,10 @@ const composedPopoverStories = storiesOf('Atomic|Popover/Composed', module)
   .addDecorator(withKnobs)
   .addDecorator(jsxDecorator)
 
+const testPopoverStories = storiesOf('Atomic|Popover/Tests', module)
+  .addDecorator(withKnobs)
+  .addDecorator(jsxDecorator)
+
 const exampleStyle = {
   width: '250px',
   height: '200px',
@@ -277,3 +282,86 @@ composedPopoverStories.add(
     },
   }
 )
+
+testPopoverStories.add('Popover Trigger within a DapperScrollbars', () => {
+  const triggerRef = createRef<HTMLDivElement>()
+
+  return (
+    <div className="story--example">
+      <Popover.Popover
+        triggerRef={triggerRef}
+        contents={() => (
+          <>
+            <div>
+              I'm just a simple popover looking for my
+              <br />
+              place in this <strong>vast and beautiful</strong> world.
+              <br />
+              Will you help me?
+            </div>
+          </>
+        )}
+        showEvent={PopoverInteraction.Click}
+        hideEvent={PopoverInteraction.Click}
+        position={PopoverPosition.Below}
+        color={ComponentColor.Success}
+        type={PopoverType.Outline}
+      />
+      <DapperScrollbars
+        style={{width: '100%', height: '100%', position: 'absolute'}}
+      >
+        <div style={{padding: '30px'}}>
+          <p>
+            Lorem ipsum dolor amet mixtape authentic lomo stumptown messenger
+            bag hexagon artisan, beard enamel pin biodiesel keytar tumeric raw
+            denim iceland selfies. Blue bottle banh mi hot chicken plaid irony
+            raclette yr skateboard messenger bag four dollar toast food truck
+            palo santo tote bag. Hella hell of trust fund celiac, shaman
+            whatever intelligentsia prism sriracha man braid fanny pack cardigan
+            af semiotics. Retro freegan locavore, blue bottle hell of tofu
+            austin direct trade williamsburg actually tattooed forage occupy
+            plaid kitsch. Microdosing 3 wolf moon four loko, shabby chic
+            sriracha echo park hell of small batch franzen chia tumeric. Hashtag
+            authentic echo park, cornhole flannel sartorial cloud bread
+            taxidermy.
+          </p>
+          <p>
+            Poke tbh synth, everyday carry hella small batch XOXO salvia
+            literally 3 wolf moon pork belly. Blog marfa migas iPhone, crucifix
+            salvia tousled. Actually hella polaroid kitsch waistcoat tote bag
+            forage palo santo single-origin coffee cornhole umami fingerstache.
+            Heirloom gastropub twee pickled tumblr snackwave portland leggings
+            raclette shabby chic kitsch knausgaard. Lumbersexual palo santo woke
+            forage narwhal meh letterpress. Gochujang YOLO cardigan, hexagon
+            hell of kogi succulents squid brooklyn.
+          </p>
+          <p>
+            Poke tbh synth, everyday carry hella small batch XOXO salvia
+            literally 3 wolf moon pork belly. Blog marfa migas iPhone, crucifix
+            salvia tousled. Actually hella polaroid kitsch waistcoat tote bag
+            forage palo santo single-origin coffee cornhole umami fingerstache.
+            Heirloom gastropub twee pickled tumblr snackwave portland leggings
+            raclette shabby chic kitsch knausgaard. Lumbersexual palo santo woke
+            forage narwhal meh letterpress. Gochujang YOLO cardigan, hexagon
+            hell of kogi succulents squid brooklyn.
+          </p>
+          <div
+            className="mockComponent mockButton"
+            ref={triggerRef}
+            style={{margin: '30px 0'}}
+          >
+            Click Me
+          </div>
+          <p>
+            Ennui truffaut artisan drinking vinegar distillery tumeric roof
+            party kickstarter. Leggings vice try-hard cardigan crucifix pork
+            belly poutine. Yuccie 8-bit leggings, kombucha gluten-free
+            post-ironic knausgaard snackwave craft beer. Tumblr shabby chic deep
+            v, irony slow-carb celiac skateboard kale chips succulents ennui
+            franzen.
+          </p>
+        </div>
+      </DapperScrollbars>
+    </div>
+  )
+})