From b6e1db27e2b50fa82738fe4de83d3078688a2019 Mon Sep 17 00:00:00 2001
From: Brianna Hall <briannahall@Briannas-MacBook-Pro.local>
Date: Tue, 7 Sep 2021 16:53:30 -0400
Subject: [PATCH] Refactored scroll method inside of EuiPopover to resolve
 positioning errors when components the popover are nested inside of
 containers like EuiFlyout

---
 src-docs/src/views/flyout/flyout_complicated.js   | 1 +
 src/components/form/super_select/super_select.tsx | 9 +++++++++
 src/components/popover/popover.tsx                | 7 ++++---
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src-docs/src/views/flyout/flyout_complicated.js b/src-docs/src/views/flyout/flyout_complicated.js
index ac0a0f09553..08f5966975b 100644
--- a/src-docs/src/views/flyout/flyout_complicated.js
+++ b/src-docs/src/views/flyout/flyout_complicated.js
@@ -221,6 +221,7 @@ export default () => {
                 valueOfSelected={superSelectvalue}
                 onChange={(value) => onSuperSelectChange(value)}
                 itemLayoutAlign="top"
+                repositionOnScroll={true}
                 hasDividers
               />
             </EuiFormRow>
diff --git a/src/components/form/super_select/super_select.tsx b/src/components/form/super_select/super_select.tsx
index bba1e11e6d2..a96d081afd1 100644
--- a/src/components/form/super_select/super_select.tsx
+++ b/src/components/form/super_select/super_select.tsx
@@ -77,6 +77,13 @@ export type EuiSuperSelectProps<T extends string> = CommonProps &
      * Controls whether the options are shown. Default: false
      */
     isOpen?: boolean;
+
+    /**
+     * When `true`, the popover's position is re-calculated when the user
+     * scrolls, this supports having fixed-position popover anchors. This value is passed
+     * to the EuiInputPopover component
+     */
+    repositionOnScroll?: boolean;
   };
 
 export class EuiSuperSelect<T extends string> extends Component<
@@ -252,6 +259,7 @@ export class EuiSuperSelect<T extends string> extends Component<
       fullWidth,
       popoverClassName,
       compressed,
+      repositionOnScroll,
       ...rest
     } = this.props;
 
@@ -318,6 +326,7 @@ export class EuiSuperSelect<T extends string> extends Component<
         closePopover={this.closePopover}
         panelPaddingSize="none"
         fullWidth={fullWidth}
+        repositionOnScroll={repositionOnScroll}
       >
         <EuiScreenReaderOnly>
           <p role="alert">
diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
index 5957c52e8a4..16151bb62da 100644
--- a/src/components/popover/popover.tsx
+++ b/src/components/popover/popover.tsx
@@ -510,7 +510,7 @@ export class EuiPopover extends Component<Props, State> {
     }
 
     if (this.props.repositionOnScroll) {
-      window.addEventListener('scroll', this.positionPopoverFixed);
+      window.addEventListener('scroll', this.positionPopoverFixed, true);
     }
   }
 
@@ -523,9 +523,10 @@ export class EuiPopover extends Component<Props, State> {
     // update scroll listener
     if (prevProps.repositionOnScroll !== this.props.repositionOnScroll) {
       if (this.props.repositionOnScroll) {
-        window.addEventListener('scroll', this.positionPopoverFixed);
+        console.log('running');
+        window.addEventListener('scroll', this.positionPopoverFixed, true);
       } else {
-        window.removeEventListener('scroll', this.positionPopoverFixed);
+        window.removeEventListener('scroll', this.positionPopoverFixed, true);
       }
     }