From: 7PH <benjamin.raymond@sonarsource.com>
Date: Thu, 4 May 2023 16:15:43 +0000 (+0200)
Subject: SONAR-19019 Fix all dropdown menus not closing after a click
X-Git-Tag: 10.1.0.73491~343
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=d346ddf77fb624d69228a0fe89ff570a5b44ba66;p=sonarqube.git

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 ac1e5132b17..5c45f98ec7c 100644
--- 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 8bbef2aeee3..55580b338c4 100644
--- 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);