[EuiPopover] Resolve Positioning Errors When EuiPopover is Nested Inside of EuiFlyout

CHANGELOG.md

@@ -10,6 +10,8 @@
 - Refactored styles of `EuiTabs` ([#5135](https://github.com/elastic/eui/pull/5135))
 - Removed Sass variables for `EuiTabs` font size (`$euiTabFontSize, $euiTabFontSizeS, $euiTabFontSizeL`) ([#5135](https://github.com/elastic/eui/pull/5135))
 - Extended all `EuiTabProps` for each `EuiTabbedContentTab` ([#5135](https://github.com/elastic/eui/pull/5135))
+- Changed `EuiPopover`'s `repositionOnScroll` function to prevent popover and input elements from separating on scroll when nested in `EuiFlyout` ([#5155](https://github.com/elastic/eui/pull/5155))
+- Added the `repositionOnScroll` prop to `EuiSuperSelect` ([#5155](https://github.com/elastic/eui/pull/5155)) 
 - Added `useGeneratedHtmlId` utility, which memoizes the randomly generated ID on mount and prevents regenerated IDs on component rerender ([#5133](https://github.com/elastic/eui/pull/5133))
 
 **Theme: Amsterdam**

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