Fix tooltip visibility issues during scroll in model selector popup (#24593)
Co-authored-by: 17hz <0x149527@gmail.com>
This commit is contained in:
@@ -11,6 +11,17 @@ class TooltipManager {
|
|||||||
if (this.activeCloser === closeFn)
|
if (this.activeCloser === closeFn)
|
||||||
this.activeCloser = null
|
this.activeCloser = null
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Closes the currently active tooltip by calling its closer function
|
||||||
|
* and clearing the reference to it
|
||||||
|
*/
|
||||||
|
closeActiveTooltip() {
|
||||||
|
if (this.activeCloser) {
|
||||||
|
this.activeCloser()
|
||||||
|
this.activeCloser = null
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const tooltipManager = new TooltipManager()
|
export const tooltipManager = new TooltipManager()
|
||||||
|
@@ -1,5 +1,5 @@
|
|||||||
import type { FC } from 'react'
|
import type { FC } from 'react'
|
||||||
import { useMemo, useState } from 'react'
|
import { useEffect, useMemo, useRef, useState } from 'react'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import {
|
import {
|
||||||
RiArrowRightUpLine,
|
RiArrowRightUpLine,
|
||||||
@@ -16,6 +16,7 @@ import PopupItem from './popup-item'
|
|||||||
import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
|
import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
|
||||||
import { useModalContext } from '@/context/modal-context'
|
import { useModalContext } from '@/context/modal-context'
|
||||||
import { supportFunctionCall } from '@/utils/tool-call'
|
import { supportFunctionCall } from '@/utils/tool-call'
|
||||||
|
import { tooltipManager } from '@/app/components/base/tooltip/TooltipManager'
|
||||||
|
|
||||||
type PopupProps = {
|
type PopupProps = {
|
||||||
defaultModel?: DefaultModel
|
defaultModel?: DefaultModel
|
||||||
@@ -35,6 +36,25 @@ const Popup: FC<PopupProps> = ({
|
|||||||
const language = useLanguage()
|
const language = useLanguage()
|
||||||
const [searchText, setSearchText] = useState('')
|
const [searchText, setSearchText] = useState('')
|
||||||
const { setShowAccountSettingModal } = useModalContext()
|
const { setShowAccountSettingModal } = useModalContext()
|
||||||
|
const scrollRef = useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
|
// Close any open tooltips when the user scrolls to prevent them from appearing
|
||||||
|
// in incorrect positions or becoming detached from their trigger elements
|
||||||
|
useEffect(() => {
|
||||||
|
const handleTooltipCloseOnScroll = () => {
|
||||||
|
tooltipManager.closeActiveTooltip()
|
||||||
|
}
|
||||||
|
|
||||||
|
const scrollContainer = scrollRef.current
|
||||||
|
if (!scrollContainer) return
|
||||||
|
|
||||||
|
// Use passive listener for better performance since we don't prevent default
|
||||||
|
scrollContainer.addEventListener('scroll', handleTooltipCloseOnScroll, { passive: true })
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
scrollContainer.removeEventListener('scroll', handleTooltipCloseOnScroll)
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
const filteredModelList = useMemo(() => {
|
const filteredModelList = useMemo(() => {
|
||||||
return modelList.map((model) => {
|
return modelList.map((model) => {
|
||||||
@@ -60,7 +80,7 @@ const Popup: FC<PopupProps> = ({
|
|||||||
}, [language, modelList, scopeFeatures, searchText])
|
}, [language, modelList, scopeFeatures, searchText])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='max-h-[480px] w-[320px] overflow-y-auto rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg'>
|
<div ref={scrollRef} className='max-h-[480px] w-[320px] overflow-y-auto rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg'>
|
||||||
<div className='sticky top-0 z-10 bg-components-panel-bg pb-1 pl-3 pr-2 pt-3'>
|
<div className='sticky top-0 z-10 bg-components-panel-bg pb-1 pl-3 pr-2 pt-3'>
|
||||||
<div className={`
|
<div className={`
|
||||||
flex h-8 items-center rounded-lg border pl-[9px] pr-[10px]
|
flex h-8 items-center rounded-lg border pl-[9px] pr-[10px]
|
||||||
|
Reference in New Issue
Block a user