Merge pull request #14467 from overleaf/ds-conditional-tooltip

Added condition on tooltip for the dropdown

GitOrigin-RevId: d8291f98b2bad809579b47714b0eab278195327e

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,

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