Refactored scroll method inside of EuiPopover to resolve positioning errors when components the popover are nested inside of containers like EuiFlyout

Author: Brianna Hall

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>

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">

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);
       }
     }