diff --git a/CHANGELOG.md b/CHANGELOG.md
index dfde4e6b1bf..e6123b92ddf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,8 @@ No public interface changes since `37.7.0`.
- 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))
- Fixed `z-index` styles that were causing parts of `EuiResizableContainer` to overlap `EuiHeader` ([#5164](https://github.com/elastic/eui/pull/5164))
diff --git a/src-docs/src/views/flyout/flyout_complicated.js b/src-docs/src/views/flyout/flyout_complicated.js
index ac0a0f09553..de76084edb5 100644
--- a/src-docs/src/views/flyout/flyout_complicated.js
+++ b/src-docs/src/views/flyout/flyout_complicated.js
@@ -3,6 +3,7 @@ import React, { useState, Fragment } from 'react';
import {
EuiButton,
EuiButtonEmpty,
+ EuiCode,
EuiCodeBlock,
EuiComboBox,
EuiExpression,
@@ -207,11 +208,16 @@ export default () => {
}
isOpen={isPopoverOpen}
+ repositionOnScroll={true}
>
This is the popover content, notice how it can overflow the
flyout!
+
+ When placed in a flyout, the repositionOnScroll{' '}
+ prop ensures that the popover scrolls with body of the flyout.
+
@@ -221,6 +227,7 @@ export default () => {
valueOfSelected={superSelectvalue}
onChange={(value) => onSuperSelectChange(value)}
itemLayoutAlign="top"
+ repositionOnScroll={true}
hasDividers
/>
@@ -229,6 +236,7 @@ export default () => {
setIsExpressionOpen(false)}
+ repositionOnScroll={true}
button={
= 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. When nesting an `EuiSuperSelect` in a scrollable container,
+ * `repositionOnScroll` should be `true`
+ */
+ repositionOnScroll?: boolean;
};
export class EuiSuperSelect extends Component<
@@ -252,6 +260,7 @@ export class EuiSuperSelect extends Component<
fullWidth,
popoverClassName,
compressed,
+ repositionOnScroll,
...rest
} = this.props;
@@ -318,6 +327,7 @@ export class EuiSuperSelect extends Component<
closePopover={this.closePopover}
panelPaddingSize="none"
fullWidth={fullWidth}
+ repositionOnScroll={repositionOnScroll}
>
diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
index 5957c52e8a4..922e66e1464 100644
--- a/src/components/popover/popover.tsx
+++ b/src/components/popover/popover.tsx
@@ -151,7 +151,8 @@ export interface EuiPopoverProps {
popoverRef?: Ref;
/**
* When `true`, the popover's position is re-calculated when the user
- * scrolls, this supports having fixed-position popover anchors
+ * scrolls, this supports having fixed-position popover anchors. When nesting
+ * an `EuiPopover` in a scrollable container, `repositionOnScroll` should be `true`
*/
repositionOnScroll?: boolean;
/**
@@ -510,7 +511,7 @@ export class EuiPopover extends Component {
}
if (this.props.repositionOnScroll) {
- window.addEventListener('scroll', this.positionPopoverFixed);
+ window.addEventListener('scroll', this.positionPopoverFixed, true);
}
}
@@ -523,9 +524,9 @@ export class EuiPopover extends Component {
// update scroll listener
if (prevProps.repositionOnScroll !== this.props.repositionOnScroll) {
if (this.props.repositionOnScroll) {
- window.addEventListener('scroll', this.positionPopoverFixed);
+ window.addEventListener('scroll', this.positionPopoverFixed, true);
} else {
- window.removeEventListener('scroll', this.positionPopoverFixed);
+ window.removeEventListener('scroll', this.positionPopoverFixed, true);
}
}