[Security Solution] Reposition EuiPopovers on scroll (#69433)

* [Security Solution] Reposition EuiPopovers on scroll

* update snapshots

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

src/plugins/data/public/ui/filter_bar/filter_bar.tsx

@@ -109,6 +109,7 @@ function FilterBarUI(props: Props) {
           panelPaddingSize="none"
           ownFocus={true}
           initialFocus=".filterEditor__hiddenItem"
+          repositionOnScroll
         >
           <EuiFlexItem grow={false}>
             <div style={{ width: 400 }}>

src/plugins/data/public/ui/filter_bar/filter_options.tsx

@@ -167,6 +167,7 @@ class FilterOptionsUI extends Component<Props, State> {
         anchorPosition="rightUp"
         panelPaddingSize="none"
         withTitle
+        repositionOnScroll
       >
         <EuiPopoverTitle>
           <FormattedMessage

src/plugins/data/public/ui/query_string_input/language_switcher.tsx

@@ -77,6 +77,7 @@ export function QueryLanguageSwitcher(props: Props) {
       isOpen={isPopoverOpen}
       closePopover={() => setIsPopoverOpen(false)}
       withTitle
+      repositionOnScroll
     >
       <EuiPopoverTitle>
         <FormattedMessage

src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx

@@ -182,6 +182,7 @@ export function SavedQueryManagementComponent({
         panelPaddingSize="none"
         buffer={-8}
         ownFocus
+        repositionOnScroll
       >
         <div
           className="kbnSavedQueryManagement__popover"

x-pack/plugins/security_solution/public/alerts/components/rules/rule_actions_overflow/__snapshots__/index.test.tsx.snap

@@ -27,6 +27,7 @@ exports[`RuleActionsOverflow snapshots renders correctly against snapshot 1`] =
     isOpen={false}
     ownFocus={true}
     panelPaddingSize="none"
+    repositionOnScroll={true}
   >
     <EuiContextMenuPanel
       data-test-subj="rules-details-menu-panel"

x-pack/plugins/security_solution/public/alerts/components/rules/rule_actions_overflow/index.tsx

@@ -135,6 +135,7 @@ const RuleActionsOverflowComponent = ({
         data-test-subj="rules-details-popover"
         ownFocus={true}
         panelPaddingSize="none"
+        repositionOnScroll
       >
         <EuiContextMenuPanel data-test-subj="rules-details-menu-panel" items={actions} />
       </EuiPopover>

x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/all/rules_table_filters/tags_filter_popover.tsx

@@ -61,6 +61,7 @@ export const TagsFilterPopoverComponent = ({
       isOpen={isTagPopoverOpen}
       closePopover={() => setIsTagPopoverOpen(!isTagPopoverOpen)}
       panelPaddingSize="none"
+      repositionOnScroll
     >
       <ScrollableDiv>
         {tags.map((tag, index) => (

x-pack/plugins/security_solution/public/cases/components/filter_popover/index.tsx

@@ -84,6 +84,7 @@ export const FilterPopoverComponent = ({
       isOpen={isPopoverOpen}
       closePopover={setIsPopoverOpenCb}
       panelPaddingSize="none"
+      repositionOnScroll
     >
       <ScrollableDiv>
         {options.map((option, index) => (

x-pack/plugins/security_solution/public/cases/components/property_actions/index.tsx

@@ -71,6 +71,7 @@ export const PropertyActions = React.memo<PropertyActionsProps>(({ propertyActio
           id="settingsPopover"
           isOpen={showActions}
           closePopover={onClosePopover}
+          repositionOnScroll
         >
           <EuiFlexGroup
             alignItems="flexStart"

x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_pagination.tsx

@@ -100,6 +100,7 @@ const ExceptionsViewerPaginationComponent = ({
           isOpen={isOpen}
           closePopover={handleClosePerPageMenu}
           panelPaddingSize="none"
+          repositionOnScroll
         >
           <EuiContextMenuPanel items={items} />
         </EuiPopover>

x-pack/plugins/security_solution/public/common/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap

@@ -95,6 +95,7 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = `
       onClick={[Function]}
       ownFocus={false}
       panelPaddingSize="m"
+      repositionOnScroll={true}
     >
       <EuiDescriptionList
         data-test-subj="anomaly-description-list"

x-pack/plugins/security_solution/public/common/components/ml/score/anomaly_score.tsx

@@ -56,6 +56,7 @@ export const AnomalyScoreComponent = ({
           onClick={() => setIsOpen(!isOpen)}
           closePopover={() => setIsOpen(!isOpen)}
           button={<Icon type="iInCircle" />}
+          repositionOnScroll
         >
           <EuiDescriptionList
             data-test-subj="anomaly-description-list"

x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/__snapshots__/groups_filter_popover.test.tsx.snap

@@ -21,6 +21,7 @@ exports[`GroupsFilterPopover renders correctly against snapshot 1`] = `
   isOpen={false}
   ownFocus={true}
   panelPaddingSize="none"
+  repositionOnScroll={true}
 >
   <EuiFilterSelectItem
     key="0-auditbeat"

x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/groups_filter_popover.tsx

@@ -67,6 +67,7 @@ export const GroupsFilterPopoverComponent = ({
       isOpen={isGroupPopoverOpen}
       closePopover={() => setIsGroupPopoverOpen(!isGroupPopoverOpen)}
       panelPaddingSize="none"
+      repositionOnScroll
     >
       {uniqueGroups.map((group, index) => (
         <EuiFilterSelectItem

x-pack/plugins/security_solution/public/common/components/ml_popover/ml_popover.tsx

@@ -122,6 +122,7 @@ export const MlPopover = React.memo(() => {
         }
         isOpen={isPopoverOpen}
         closePopover={() => setIsPopoverOpen(!isPopoverOpen)}
+        repositionOnScroll
       >
         <UpgradeContents />
       </EuiPopover>
@@ -147,6 +148,7 @@ export const MlPopover = React.memo(() => {
         }
         isOpen={isPopoverOpen}
         closePopover={() => setIsPopoverOpen(!isPopoverOpen)}
+        repositionOnScroll
       >
         <PopoverContentsDiv data-test-subj="ml-popover-contents">
           <EuiPopoverTitle>{i18n.ML_JOB_SETTINGS}</EuiPopoverTitle>

x-pack/plugins/security_solution/public/common/components/paginated_table/index.tsx

@@ -273,6 +273,7 @@ const PaginatedTableComponent: FC<SiemTables> = ({
                     isOpen={isPopoverOpen}
                     closePopover={closePopover}
                     panelPaddingSize="none"
+                    repositionOnScroll
                   >
                     <EuiContextMenuPanel items={rowItems} data-test-subj="loadingMorePickSizeRow" />
                   </EuiPopover>

x-pack/plugins/security_solution/public/common/components/tables/helpers.tsx

@@ -195,6 +195,7 @@ export const PopoverComponent = ({
         closePopover={() => setIsOpen(!isOpen)}
         id={`${idPrefix}-popover`}
         isOpen={isOpen}
+        repositionOnScroll
       >
         {children}
       </EuiPopover>

x-pack/plugins/security_solution/public/common/components/utility_bar/utility_bar_action.tsx

@@ -33,6 +33,7 @@ const Popover = React.memo<UtilityBarActionProps>(
         }
         closePopover={() => setPopoverState(false)}
         isOpen={popoverState}
+        repositionOnScroll
       >
         {popoverContent?.(closePopover)}
       </EuiPopover>

x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.tsx

@@ -92,6 +92,7 @@ export const TableRowActions = React.memo<{ items: EuiContextMenuPanelProps['ite
         }
         isOpen={isOpen}
         closePopover={handleCloseMenu}
+        repositionOnScroll
       >
         <EuiContextMenuPanel items={items} data-test-subj="policyActionsMenu" />
       </EuiPopover>

x-pack/plugins/security_solution/public/resolver/view/submenu.tsx

@@ -215,6 +215,7 @@ const NodeSubMenuComponents = React.memo(
           button={submenuPopoverButton}
           isOpen={menuIsOpen}
           closePopover={closePopover}
+          repositionOnScroll
         >
           {menuIsOpen && typeof optionsWithActions === 'object' && (
             <OptionList isLoading={isMenuLoading} subMenuOptions={optionsWithActions} />

x-pack/plugins/security_solution/public/timelines/components/field_renderers/field_renderers.tsx

@@ -274,6 +274,7 @@ export const DefaultFieldRendererOverflow = React.memo<DefaultFieldRendererOverf
             }
             isOpen={isOpen}
             closePopover={() => setIsOpen(!isOpen)}
+            repositionOnScroll
           >
             <MoreContainer
               idPrefix={idPrefix}

x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/event_column_view.tsx

@@ -187,6 +187,7 @@ export const EventColumnView = React.memo<Props>(
                 closePopover={closePopover}
                 panelPaddingSize="none"
                 anchorPosition="downLeft"
+                repositionOnScroll
               >
                 <ContextMenuPanel items={grouped.contextMenu} />
               </EuiPopover>

x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.tsx

@@ -100,6 +100,7 @@ export const InsertTimelinePopoverComponent: React.FC<Props> = ({
       button={insertTimelineButton}
       isOpen={isPopoverOpen}
       closePopover={handleClosePopover}
+      repositionOnScroll
     >
       <SelectableTimeline
         hideUntitled={hideUntitled}

x-pack/plugins/security_solution/public/timelines/components/timeline/properties/properties_right.tsx

@@ -138,6 +138,7 @@ const PropertiesRightComponent: React.FC<PropertiesRightComponentProps> = ({
             id="timelineSettingsPopover"
             isOpen={showActions}
             closePopover={onClosePopover}
+            repositionOnScroll
           >
             <EuiFlexGroup alignItems="flexStart" direction="column" gutterSize="none">
               {capabilitiesCanUserCRUD && (