fix tooltip show wrong place

KyberNetwork · Aug 29, 2023 · 49e1e76 · 49e1e76
1 parent dbfd5df
commit 49e1e76
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/src/components/DownloadWalletModal/index.tsx b/src/components/DownloadWalletModal/index.tsx
@@ -1,7 +1,7 @@
 import { Trans } from '@lingui/macro'
 import { rgba } from 'polished'
 import { X } from 'react-feather'
-import { Flex, Image, Text } from 'rebass'
+import { Image, Text } from 'rebass'
 import styled from 'styled-components'
 
 import Column from 'components/Column'

diff --git a/src/pages/TrueSightV2/components/MultipleChainDropdown.tsx b/src/pages/TrueSightV2/components/MultipleChainDropdown.tsx
@@ -84,7 +84,7 @@ const MultipleChainDropdown = React.forwardRef(
     if (isMobile) {
       return (
         <Modal isOpen={show}>
-          <Column padding="24px" width="100%" gap="12px">
+          <Column padding="24px" width="100%" gap="12px" onClick={e => e.stopPropagation()}>
             <Row>
               <Text fontSize="20px" fontWeight={500}>
                 Select Chain
@@ -169,6 +169,7 @@ const MultipleChainDropdown = React.forwardRef(
         color={theme.text}
         style={{ left: menuLeft !== undefined ? `${menuLeft}px` : undefined }}
         ref={ref}
+        onClick={e => e.stopPropagation()}
       >
         {tokens?.map((item: { address: string; logo: string; chain: string }) => {
           if (item.chain === 'ethereum')

diff --git a/src/pages/TrueSightV2/components/SimpleTooltip.tsx b/src/pages/TrueSightV2/components/SimpleTooltip.tsx
@@ -128,6 +128,8 @@ export default function SimpleTooltip({
     }
   }, [show, x, y])
 
+  const isShow = (show || (!!x && !!y)) && !(hideOnMobile && isMobile)
+
   const { top, left, alphaLeft } = useMemo(() => {
     const clientRect = ref.current?.getBoundingClientRect()
     if (!bodyRect || !clientRect || !height || !width) return {}
@@ -139,7 +141,9 @@ export default function SimpleTooltip({
     }
 
     return { top, left, alphaLeft }
-  }, [height, width, x, y, bodyRect])
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [height, width, x, y, bodyRect, isShow])
 
   useEffect(() => {
     if (x !== undefined && y !== undefined) {
@@ -158,15 +162,12 @@ export default function SimpleTooltip({
 
     window.addEventListener('resize', handleResize)
     window.addEventListener('scroll', handleResize)
-
     return () => {
       window.removeEventListener('resize', handleResize)
       window.removeEventListener('scroll', handleResize)
     }
   }, [])
 
-  const isShow = (show || (!!x && !!y)) && !(hideOnMobile && isMobile)
-
   const tooltipContent = useMemo(() => {
     if (!text) return null
     return ReactDOM.createPortal(
@@ -187,6 +188,7 @@ export default function SimpleTooltip({
       document.body,
     )
   }, [alphaLeft, className, disappearOnHover, handleMouseLeave, left, maxWidthProp, text, top, widthProp])
+
   if (disabled) {
     return <>{children}</>
   }