From 575f646dd4af2a98ceee0a2aa2ebd948637467a2 Mon Sep 17 00:00:00 2001
From: Alasdair Smith <ali@alasdairsmith.co.uk>
Date: Tue, 29 Aug 2023 11:12:50 +0100
Subject: [PATCH] Merge pull request #14467 from
 overleaf/ds-conditional-tooltip

Added condition on tooltip for the dropdown

GitOrigin-RevId: d8291f98b2bad809579b47714b0eab278195327e
---
 .../change-list/dropdown/actions-dropdown.tsx |  1 +
 .../dropdown/dropdown-toggle-with-tooltip.tsx | 29 +++++++++++--------
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/services/web/frontend/js/features/history/components/change-list/dropdown/actions-dropdown.tsx b/services/web/frontend/js/features/history/components/change-list/dropdown/actions-dropdown.tsx
index b7480eae77..e59a7b57ae 100644
--- a/services/web/frontend/js/features/history/components/change-list/dropdown/actions-dropdown.tsx
+++ b/services/web/frontend/js/features/history/components/change-list/dropdown/actions-dropdown.tsx
@@ -57,6 +57,7 @@ function ActionsDropdown({
       <DropdownToggleWithTooltip
         bsRole="toggle"
         className="history-version-dropdown-menu-btn"
+        isOpened={isOpened}
         tooltipProps={{
           id,
           description: toolTipDescription,
diff --git a/services/web/frontend/js/shared/components/dropdown/dropdown-toggle-with-tooltip.tsx b/services/web/frontend/js/shared/components/dropdown/dropdown-toggle-with-tooltip.tsx
index 44756b6f16..f71d4fd6fa 100644
--- a/services/web/frontend/js/shared/components/dropdown/dropdown-toggle-with-tooltip.tsx
+++ b/services/web/frontend/js/shared/components/dropdown/dropdown-toggle-with-tooltip.tsx
@@ -8,6 +8,7 @@ type CustomToggleProps = MergeAndOverride<
   Pick<DropdownProps, 'bsClass' | 'open'>,
   {
     children: React.ReactNode
+    isOpened: boolean
     bsRole: 'toggle'
     className?: string
     tooltipProps: Omit<React.ComponentProps<typeof Tooltip>, 'children'>
@@ -20,6 +21,7 @@ const DropdownToggleWithTooltip = forwardRef<
 >(function (props, ref) {
   const {
     tooltipProps,
+    isOpened,
     children,
     bsClass,
     className,
@@ -28,21 +30,24 @@ const DropdownToggleWithTooltip = forwardRef<
     ...rest
   } = props
 
+  const button = (
+    <button
+      type="button"
+      ref={ref}
+      className={classnames(bsClass, 'btn', className)}
+      aria-expanded={open}
+      aria-haspopup="true"
+      {...rest}
+    >
+      {children}
+    </button>
+  )
+
   return (
-    <Tooltip {...tooltipProps}>
-      <button
-        type="button"
-        ref={ref}
-        className={classnames(bsClass, 'btn', className)}
-        aria-expanded={open}
-        aria-haspopup="true"
-        {...rest}
-      >
-        {children}
-      </button>
-    </Tooltip>
+    <>{isOpened ? button : <Tooltip {...tooltipProps}>{button}</Tooltip>}</>
   )
 })
+
 DropdownToggleWithTooltip.displayName = 'DropdownToggleWithTooltip'
 
 export default DropdownToggleWithTooltip