From 241349af02f1bc2ed69840eb55f49fcfa82cfee5 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Thu, 27 Oct 2022 11:27:03 +0200
Subject: [PATCH] fix(ui): fix time skip tooltip

---
 .../Player/Controls/components/PlayerControls.tsx    | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx b/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx
index f2f52fd7b..326fa14ad 100644
--- a/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx
+++ b/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx
@@ -49,6 +49,7 @@ function PlayerControls(props: Props) {
   const speedRef = React.useRef(null);
   const arrowBackRef = React.useRef(null);
   const arrowForwardRef = React.useRef(null);
+  const skipRef = React.useRef<HTMLDivElement>()
 
   React.useEffect(() => {
     const handleKeyboard = (e: KeyboardEvent) => {
@@ -75,6 +76,9 @@ function PlayerControls(props: Props) {
   const toggleTooltip = () => {
     setShowTooltip(!showTooltip);
   };
+  const handleClickOutside = () => {
+    setShowTooltip(false)
+  }
   return (
     <div className="flex items-center">
       {playButton}
@@ -105,6 +109,7 @@ function PlayerControls(props: Props) {
           </button>
         </Tooltip>
         <div className="p-1 border-l border-r bg-active-blue-border border-active-blue-border">
+        <OutsideClickDetectingDiv onClickOutside={handleClickOutside}>
           <Tooltip
             open={showTooltip}
             interactive
@@ -115,9 +120,6 @@ function PlayerControls(props: Props) {
             className="cursor-pointer select-none"
             distance={20}
             html={
-              <OutsideClickDetectingDiv
-                onClickOutside={() => (showTooltip ? toggleTooltip() : null)}
-              >
                 <div className="flex flex-col bg-white border border-borderColor-gray-light-shade text-figmaColors-text-primary rounded">
                   <div className="font-semibold py-2 px-4 w-full text-left">
                     Jump <span className="text-disabled-text">(Secs)</span>
@@ -139,16 +141,16 @@ function PlayerControls(props: Props) {
                     </div>
                   ))}
                 </div>
-              </OutsideClickDetectingDiv>
             }
           >
-            <div onClick={toggleTooltip}>
+            <div onClick={toggleTooltip} ref={skipRef}>
               {/* @ts-ignore */}
               <Tooltip disabled={showTooltip} title="Set default skip duration">
                 {currentInterval}s
               </Tooltip>
             </div>
           </Tooltip>
+          </OutsideClickDetectingDiv>
         </div>
         {/* @ts-ignore */}
         <Tooltip title="Forward 10s" delay={0} position="top">