From ccf0bd6535162b0e6f7498679ae2f108c9af84b2 Mon Sep 17 00:00:00 2001
From: automated-signal <37887102+automated-signal@users.noreply.github.com>
Date: Mon, 29 Apr 2024 15:51:08 -0500
Subject: [PATCH] Fix call react button lingering tooltip

Co-authored-by: ayumi-signal <143036029+ayumi-signal@users.noreply.github.com>
---
 stylesheets/components/CallControls.scss |  4 --
 ts/components/CallingButton.tsx          | 56 ++++++++++++++----------
 2 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/stylesheets/components/CallControls.scss b/stylesheets/components/CallControls.scss
index da328f396b..7140ac5656 100644
--- a/stylesheets/components/CallControls.scss
+++ b/stylesheets/components/CallControls.scss
@@ -110,10 +110,6 @@
   margin-block: -5px;
 }
 
-.CallControls__ReactButtonContainer--menu-shown .module-tooltip {
-  opacity: 0;
-}
-
 .CallControls__OuterSpacer {
   // Defined in _modules but duplicated here for ease of refactor
   $local-preview-width: 108px;
diff --git a/ts/components/CallingButton.tsx b/ts/components/CallingButton.tsx
index f448e7c95f..4f7597f0a3 100644
--- a/ts/components/CallingButton.tsx
+++ b/ts/components/CallingButton.tsx
@@ -111,34 +111,42 @@ export function CallingButton({
     tooltipContent = i18n('icu:CallingButton--more-options');
   }
 
+  const buttonContent = (
+    <button
+      aria-label={tooltipContent}
+      className={classNames(
+        'CallingButton__icon',
+        `CallingButton__icon--${classNameSuffix}`
+      )}
+      disabled={disabled}
+      id={uniqueButtonId}
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      type="button"
+    >
+      <div />
+    </button>
+  );
+
   return (
     <div className="CallingButton">
-      <Tooltip
-        className="CallingButton__tooltip"
-        wrapperClassName={classNames(
-          'CallingButton__button-container',
-          !isVisible && 'CallingButton__button-container--hidden'
-        )}
-        content={tooltipContent}
-        direction={tooltipDirection}
-        theme={Theme.Dark}
-      >
-        <button
-          aria-label={tooltipContent}
-          className={classNames(
-            'CallingButton__icon',
-            `CallingButton__icon--${classNameSuffix}`
+      {tooltipContent === '' ? (
+        <div className="CallingButton__button-container">{buttonContent}</div>
+      ) : (
+        <Tooltip
+          className="CallingButton__tooltip"
+          wrapperClassName={classNames(
+            'CallingButton__button-container',
+            !isVisible && 'CallingButton__button-container--hidden'
           )}
-          disabled={disabled}
-          id={uniqueButtonId}
-          onClick={onClick}
-          onMouseEnter={onMouseEnter}
-          onMouseLeave={onMouseLeave}
-          type="button"
+          content={tooltipContent}
+          direction={tooltipDirection}
+          theme={Theme.Dark}
         >
-          <div />
-        </button>
-      </Tooltip>
+          {buttonContent}
+        </Tooltip>
+      )}
     </div>
   );
 }