only apply stopPropagation to onAfterClose prop

Author: Lukas742

packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx

@@ -20,7 +20,7 @@ import { PopoverHorizontalAlign } from '@ui5/webcomponents-react/lib/PopoverHori
 import { StandardListItem } from '@ui5/webcomponents-react/lib/StandardListItem';
 import React, { CSSProperties, forwardRef, RefObject, useCallback } from 'react';
 import { Ui5PopoverDomRef } from '../../../interfaces/Ui5PopoverDomRef';
-import { stopPopoverPropagationProps } from '../../../internal/stopPopoverPropagationProps';
+import { stopPropagation } from '../../../internal/stopPropagation';
 import { ColumnType } from '../types/ColumnType';
 
 export interface ColumnHeaderModalProperties {
@@ -116,7 +116,7 @@ export const ColumnHeaderModal = forwardRef((props: ColumnHeaderModalProperties,
       placementType={PlacementType.Bottom}
       ref={ref}
       style={staticStyle as CSSProperties}
-      {...stopPopoverPropagationProps}
+      onAfterClose={stopPropagation}
     >
       <List onItemClick={handleSort}>
         {isSortedAscending && (

packages/main/src/components/FilterBar/FilterDialog.tsx

@@ -27,7 +27,7 @@ import { Text } from '@ui5/webcomponents-react/lib/Text';
 import { Title } from '@ui5/webcomponents-react/lib/Title';
 import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel';
 import React, { Children, cloneElement, ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { stopPopoverPropagationProps } from '../../internal/stopPopoverPropagationProps';
+import { stopPropagation } from '../../internal/stopPropagation';
 import styles from './FilterBarDialog.jss';
 import { filterValue, renderSearchWithValue } from './utils';
 
@@ -106,7 +106,7 @@ export const FilterDialog = (props) => {
 
   const handleClose = useCallback(
     (e) => {
-      e.stopPropagation();
+      stopPropagation(e);
       if (!showGoButton) {
         handleSave(e);
         return;
@@ -270,13 +270,7 @@ export const FilterDialog = (props) => {
   }, [renderChildren, toggledFilters, handleCheckBoxChange]);
 
   return (
-    <Dialog
-      ref={dialogRef}
-      header={renderHeader()}
-      footer={renderFooter()}
-      {...stopPopoverPropagationProps}
-      onAfterClose={handleClose}
-    >
+    <Dialog ref={dialogRef} header={renderHeader()} footer={renderFooter()} onAfterClose={handleClose}>
       <div className={classes.dialog}>
         {renderFBSearch && (
           <div className={classes.fbSearch} ref={searchRef}>

packages/main/src/components/MessageBox/index.tsx

@@ -37,7 +37,7 @@ import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel';
 import React, { FC, forwardRef, isValidElement, ReactNode, Ref, useCallback, useEffect, useMemo } from 'react';
 import { CommonProps } from '../../interfaces/CommonProps';
 import { Ui5DialogDomRef } from '../../interfaces/Ui5DialogDomRef';
-import { stopPopoverPropagationProps } from '../../internal/stopPopoverPropagationProps';
+import { stopPropagation } from '../../internal/stopPropagation';
 import styles from './MessageBox.jss';
 
 const actionTextMap = new Map();
@@ -155,7 +155,7 @@ const MessageBox: FC<MessageBoxPropTypes> = forwardRef((props: MessageBoxPropTyp
   const handleOnClose = useCallback(
     (e) => {
       const { action } = e.target.dataset;
-      e.stopPropagation();
+      stopPropagation(e);
       onClose(enrichEventWithDetails(e, { action }));
     },
     [onClose]
@@ -175,10 +175,6 @@ const MessageBox: FC<MessageBoxPropTypes> = forwardRef((props: MessageBoxPropTyp
 
   const passThroughProps = usePassThroughHtmlProps(props, ['onClose']);
 
-  const stopPropagation = (e) => {
-    e.stopPropagation();
-  };
-
   return (
     <Dialog
       slot={slot}
@@ -208,7 +204,6 @@ const MessageBox: FC<MessageBoxPropTypes> = forwardRef((props: MessageBoxPropTyp
           })}
         </footer>
       }
-      {...stopPopoverPropagationProps}
       onAfterClose={open ? handleOnClose : stopPropagation}
       {...passThroughProps}
     >

packages/main/src/components/ObjectPage/ObjectPageAnchorBar.tsx

@@ -13,7 +13,7 @@ import { ToggleButton } from '@ui5/webcomponents-react/lib/ToggleButton';
 import React, { CSSProperties, forwardRef, ReactElement, RefObject, useCallback, useRef, useState } from 'react';
 import { createUseStyles } from 'react-jss';
 import { Ui5PopoverDomRef } from '../../interfaces/Ui5PopoverDomRef';
-import { stopPopoverPropagationProps } from '../../internal/stopPopoverPropagationProps';
+import { stopPropagation } from '../../internal/stopPropagation';
 import { StandardListItem } from '../../webComponents/StandardListItem';
 import { ObjectPageAnchorButton } from './ObjectPageAnchorButton';
 import { safeGetChildrenArray } from './ObjectPageUtils';
@@ -195,7 +195,7 @@ const ObjectPageAnchorBar = forwardRef((props: Props, ref: RefObject<HTMLElement
           data-ui5wcr-object-page-header-action=""
         />
       )}
-      <Popover placementType={PlacementType.Bottom} noArrow ref={popoverRef} {...stopPopoverPropagationProps}>
+      <Popover placementType={PlacementType.Bottom} noArrow ref={popoverRef} onAfterClose={stopPropagation}>
         <List onItemClick={onSubSectionClick}>
           {popoverContent?.props?.children
             .filter((item) => item.props && item.props.isSubSection)

packages/main/src/components/SideNavigationListItem/index.tsx

@@ -27,7 +27,7 @@ import React, {
 import { createPortal } from 'react-dom';
 import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
 import { CommonProps } from '../../interfaces/CommonProps';
-import { stopPopoverPropagationProps } from "../../internal/stopPopoverPropagationProps";
+import { stopPropagation } from '../../internal/stopPropagation';
 import { sideNavigationListItemStyles } from './SideNavigationListItem.jss';
 
 export interface SideNavigationListItemProps extends CommonProps {
@@ -159,7 +159,7 @@ const SideNavigationListItem: FC<SideNavigationListItemProps> = forwardRef(
               {displayedIcon}
               <div className={classes.condensedExpandTriangle} />
               {createPortal(
-                <Popover ref={popoverRef} verticalAlign={PopoverVerticalAlign.Top} {...stopPopoverPropagationProps}>
+                <Popover ref={popoverRef} verticalAlign={PopoverVerticalAlign.Top} onAfterClose={stopPropagation}>
                   <List onItemClick={props['onListItemSelected']}>
                     <StandardListItem selected={isSelfSelected} data-id={id} tooltip={tooltip}>
                       {text}

packages/main/src/components/Toolbar/OverflowPopover.tsx

@@ -6,7 +6,7 @@ import { Popover } from '@ui5/webcomponents-react/lib/Popover';
 import { ToggleButton } from '@ui5/webcomponents-react/lib/ToggleButton';
 import React, { ReactElement, useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { stopPopoverPropagationProps } from '../../internal/stopPopoverPropagationProps';
+import { stopPropagation } from '../../internal/stopPropagation';
 
 export function OverflowPopover(props) {
   const { lastVisibleIndex, contentClass, children } = props;
@@ -33,7 +33,7 @@ export function OverflowPopover(props) {
   }, []);
 
   const handleClose = (e) => {
-    e.stopPropagation();
+    stopPropagation(e);
     setPressed(false);
   };
 
@@ -67,12 +67,7 @@ export function OverflowPopover(props) {
         pressed={pressed}
       />
       {createPortal(
-        <Popover
-          placementType={PlacementType.Bottom}
-          ref={popoverRef}
-          {...stopPopoverPropagationProps}
-          onAfterClose={handleClose}
-        >
+        <Popover placementType={PlacementType.Bottom} ref={popoverRef} onAfterClose={handleClose}>
           <div className={contentClass}>{renderChildren()}</div>
         </Popover>,
         document.body

packages/main/src/components/VariantManagement/index.tsx

@@ -19,7 +19,7 @@ import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel';
 import React, { FC, forwardRef, Ref, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { CommonProps } from '../../interfaces/CommonProps';
 import { Ui5ResponsivePopoverDomRef } from '../../interfaces/Ui5ResponsivePopoverDomRef';
-import { stopPopoverPropagationProps } from '../../internal/stopPopoverPropagationProps';
+import { stopPropagation } from '../../internal/stopPropagation';
 
 export interface VariantItem {
   key: string;
@@ -171,7 +171,7 @@ const VariantManagement: FC<VariantManagementPropTypes> = forwardRef(
           headerText={popupTitle}
           placementType={placement}
           footer={footerButtons}
-          {...stopPopoverPropagationProps}
+          onAfterClose={stopPropagation}
         >
           <List onItemClick={handleVariantItemSelect} mode={ListMode.SingleSelect}>
             {variantItems.map((item) => (

packages/main/src/internal/stopPopoverPropagationProps.ts

@@ -0,0 +1,4 @@
+export const stopPropagation = (e) => {
+  e.stopPropagation();
+  e.stopImmediatePropagation();
+};