SONAR-19019 Fix all dropdown menus not closing after a click

diff --git a/server/sonar-web/src/main/js/components/controls/Dropdown.tsx b/server/sonar-web/src/main/js/components/controls/Dropdown.tsx
index ac1e5132b172210d346823467e6ae88c8a7e8ea1..5c45f98ec7cd0c1a45612146386fd9d88228b2c4 100644 (file)
--- a/server/sonar-web/src/main/js/components/controls/Dropdown.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Dropdown.tsx
@@ -97,6 +97,7 @@ export default class Dropdown extends React.PureComponent<Props, State> {
           <DropdownOverlay
             noPadding={this.props.noOverlayPadding}
             placement={this.props.overlayPlacement}
+            useEventBoundary={!closeOnClick}
           >
             {this.props.overlay}
           </DropdownOverlay>
@@ -119,6 +120,7 @@ interface OverlayProps {
   children: React.ReactNode;
   noPadding?: boolean;
   placement?: PopupPlacement;
+  useEventBoundary?: boolean;
 }
 
 export class DropdownOverlay extends React.Component<OverlayProps> {
@@ -141,6 +143,7 @@ export class DropdownOverlay extends React.Component<OverlayProps> {
           ? { marginLeft: `calc(50% + ${leftFix}px)` }
           : undefined
       }
+      useEventBoundary={this.props.useEventBoundary}
     >
       {this.props.children}
     </Popup>

diff --git a/server/sonar-web/src/main/js/components/ui/popups.tsx b/server/sonar-web/src/main/js/components/ui/popups.tsx
index 8bbef2aeee3c8e7cc10e096e51e0fff601aa7d90..55580b338c45c9379a0b9933610cc327b402ef6e 100644 (file)
--- a/server/sonar-web/src/main/js/components/ui/popups.tsx
+++ b/server/sonar-web/src/main/js/components/ui/popups.tsx
@@ -55,27 +55,30 @@ interface PopupProps {
   noPadding?: boolean;
   placement?: PopupPlacement;
   style?: React.CSSProperties;
+  useEventBoundary?: boolean;
 }
 
 function PopupBase(props: PopupProps, ref: React.Ref<HTMLDivElement>) {
-  const { noArrow = false, placement = PopupPlacement.Bottom } = props;
-  return (
-    <ClickEventBoundary>
-      <div
-        className={classNames(
-          'popup',
-          `is-${placement}`,
-          { 'no-padding': props.noPadding },
-          props.className
-        )}
-        ref={ref || React.createRef()}
-        style={props.style}
-      >
-        {props.children}
-        {!noArrow && <PopupArrow style={props.arrowStyle} />}
-      </div>
-    </ClickEventBoundary>
+  const { useEventBoundary = true, noArrow = false, placement = PopupPlacement.Bottom } = props;
+  const inner = (
+    <div
+      className={classNames(
+        'popup',
+        `is-${placement}`,
+        { 'no-padding': props.noPadding },
+        props.className
+      )}
+      ref={ref || React.createRef()}
+      style={props.style}
+    >
+      {props.children}
+      {!noArrow && <PopupArrow style={props.arrowStyle} />}
+    </div>
   );
+  if (useEventBoundary) {
+    return <ClickEventBoundary>{inner}</ClickEventBoundary>;
+  }
+  return inner;
 }
 
 const PopupWithRef = React.forwardRef(PopupBase);