fix(Popups): prevent bubbling of internally used popover events (#618)

Author: Lukas742

packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.mdx

@@ -234,7 +234,7 @@ React.useEffect(() => {
 />
 ```
 
-For more details on this behavior you can double check the [react-table docs](https://github.com/tannerlinsley/react-table/blob/master/docs/faq.md#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes).
+For more details on this behavior you can double check the [react-table docs](https://react-table.tanstack.com/docs/faq#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes).
 
 ### How can I show a subset of all columns on mobile devices?
 

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

@@ -20,6 +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 { stopPropagation } from '../../../internal/stopPropagation';
 import { ColumnType } from '../types/ColumnType';
 
 export interface ColumnHeaderModalProperties {
@@ -115,6 +116,7 @@ export const ColumnHeaderModal = forwardRef((props: ColumnHeaderModalProperties,
       placementType={PlacementType.Bottom}
       ref={ref}
       style={staticStyle as CSSProperties}
+      onAfterClose={stopPropagation}
     >
       <List onItemClick={handleSort}>
         {isSortedAscending && (

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

@@ -27,6 +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 { stopPropagation } from '../../internal/stopPropagation';
 import styles from './FilterBarDialog.jss';
 import { filterValue, renderSearchWithValue } from './utils';
 
@@ -105,6 +106,7 @@ export const FilterDialog = (props) => {
 
   const handleClose = useCallback(
     (e) => {
+      stopPropagation(e);
       if (!showGoButton) {
         handleSave(e);
         return;
@@ -268,7 +270,7 @@ export const FilterDialog = (props) => {
   }, [renderChildren, toggledFilters, handleCheckBoxChange]);
 
   return (
-    <Dialog ref={dialogRef} onAfterClose={handleClose} header={renderHeader()} footer={renderFooter()}>
+    <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,6 +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 { stopPropagation } from '../../internal/stopPropagation';
 import styles from './MessageBox.jss';
 
 const actionTextMap = new Map();
@@ -154,6 +155,7 @@ const MessageBox: FC<MessageBoxPropTypes> = forwardRef((props: MessageBoxPropTyp
   const handleOnClose = useCallback(
     (e) => {
       const { action } = e.target.dataset;
+      stopPropagation(e);
       onClose(enrichEventWithDetails(e, { action }));
     },
     [onClose]
@@ -180,7 +182,6 @@ const MessageBox: FC<MessageBoxPropTypes> = forwardRef((props: MessageBoxPropTyp
       style={style}
       tooltip={tooltip}
       className={className}
-      onAfterClose={open ? handleOnClose : null}
       header={
         <header className={classes.header} data-type={type}>
           {iconToRender}
@@ -203,6 +204,7 @@ const MessageBox: FC<MessageBoxPropTypes> = forwardRef((props: MessageBoxPropTyp
           })}
         </footer>
       }
+      onAfterClose={open ? handleOnClose : stopPropagation}
       {...passThroughProps}
     >
       <Text className={classes.content}>{children}</Text>

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

@@ -13,6 +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 { stopPropagation } from '../../internal/stopPropagation';
 import { StandardListItem } from '../../webComponents/StandardListItem';
 import { ObjectPageAnchorButton } from './ObjectPageAnchorButton';
 import { safeGetChildrenArray } from './ObjectPageUtils';
@@ -194,7 +195,7 @@ const ObjectPageAnchorBar = forwardRef((props: Props, ref: RefObject<HTMLElement
           data-ui5wcr-object-page-header-action=""
         />
       )}
-      <Popover placementType={PlacementType.Bottom} noArrow ref={popoverRef}>
+      <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,6 +27,7 @@ import React, {
 import { createPortal } from 'react-dom';
 import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
 import { CommonProps } from '../../interfaces/CommonProps';
+import { stopPropagation } from '../../internal/stopPropagation';
 import { sideNavigationListItemStyles } from './SideNavigationListItem.jss';
 
 export interface SideNavigationListItemProps extends CommonProps {
@@ -158,7 +159,7 @@ const SideNavigationListItem: FC<SideNavigationListItemProps> = forwardRef(
               {displayedIcon}
               <div className={classes.condensedExpandTriangle} />
               {createPortal(
-                <Popover ref={popoverRef} verticalAlign={PopoverVerticalAlign.Top}>
+                <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,6 +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 { stopPropagation } from '../../internal/stopPropagation';
 
 export function OverflowPopover(props) {
   const { lastVisibleIndex, contentClass, children } = props;
@@ -31,7 +32,8 @@ export function OverflowPopover(props) {
     };
   }, []);
 
-  const handleClose = () => {
+  const handleClose = (e) => {
+    stopPropagation(e);
     setPressed(false);
   };
 

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

@@ -19,6 +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 { stopPropagation } from '../../internal/stopPropagation';
 
 export interface VariantItem {
   key: string;
@@ -165,7 +166,13 @@ const VariantManagement: FC<VariantManagementPropTypes> = forwardRef(
           icon="navigation-down-arrow"
           disabled={disabled}
         />
-        <ResponsivePopover ref={popoverRef} headerText={popupTitle} placementType={placement} footer={footerButtons}>
+        <ResponsivePopover
+          ref={popoverRef}
+          headerText={popupTitle}
+          placementType={placement}
+          footer={footerButtons}
+          onAfterClose={stopPropagation}
+        >
           <List onItemClick={handleVariantItemSelect} mode={ListMode.SingleSelect}>
             {variantItems.map((item) => (
               <StandardListItem

packages/main/src/internal/stopPropagation.ts

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