Refactored scroll method inside of EuiPopover to resolve positioning …

…errors when components the popover are nested inside of containers like EuiFlyout
elastic · Sep 7, 2021 · b6e1db2 · b6e1db2
1 parent cef36de
commit b6e1db2
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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);
       }
     }