diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx index d8d7af77826e..27642f95a731 100644 --- a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx +++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx @@ -13,6 +13,8 @@ export interface TrendingPopperProps { PopperProps?: Partial } +const TIMEOUT = 1500 + export function TrendingPopper(props: TrendingPopperProps) { const popperRef = useRef<{ update(): void } | null>(null) const [freezed, setFreezed] = useState(false) // disable any click @@ -21,6 +23,8 @@ export function TrendingPopper(props: TrendingPopperProps) { const [type, setType] = useState() const [anchorEl, setAnchorEl] = useState(null) const [availableDataProviders, setAvailableDataProviders] = useState([]) + const popper = useRef(null) + const [mouseIn, setMouseIn] = useState(false) // #region select token and provider dialog could be open by trending view const onFreezed = useCallback((ev) => setFreezed(ev.open), []) @@ -66,14 +70,12 @@ export function TrendingPopper(props: TrendingPopperProps) { // close popper if scroll out of visual screen const position = useWindowScroll() useEffect(() => { - if (!anchorEl) return - const { top } = anchorEl.getBoundingClientRect() - if ( - top < 0 || // out off top bound - top > document.documentElement.clientHeight // out off bottom bound - ) + if (!popper.current) return + const { top, height } = popper.current?.getBoundingClientRect() + if ((top < 0 && -1 * top > height) || top > document.documentElement.clientHeight) + // out off bottom bound setAnchorEl(null) - }, [anchorEl, Math.floor(position.y / 50)]) + }, [popper, Math.floor(position.y / 50)]) // #endregion if (locked) return null @@ -84,6 +86,7 @@ export function TrendingPopper(props: TrendingPopperProps) { if (!freezed) setAnchorEl(null) }}>