mirror of
https://github.com/CherryHQ/cherry-studio.git
synced 2025-12-31 08:29:07 +08:00
fix(Inputbar): input bar auto focus (#8756)
* fix(Inputbar): 简化输入框自动聚焦逻辑 * fix(Inputbar): 修复依赖数组缺失导致的焦点问题 添加 assistant.mcpServers 和 mentionedModels 到依赖数组,确保 textarea 在相关数据变化时能正确获取焦点 * fix(Inputbar): 添加knowledge_bases到useEffect依赖数组以修复潜在问题 * fix(Inputbar): 添加缺失的依赖项到useEffect中 * fix(Inputbar): 清空消息时自动聚焦输入框 确保当消息列表为空时,输入框自动获得焦点,提升用户体验 * refactor(Inputbar): 提取聚焦文本域逻辑到单独的回调函数 将多处直接操作textareaRef.current?.focus()的逻辑提取到focusTextarea回调函数中,提高代码复用性和可维护性
This commit is contained in:
parent
9e405f0604
commit
fb2dccc7ff
@ -189,6 +189,10 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
|
||||
_text = text
|
||||
_files = files
|
||||
|
||||
const focusTextarea = useCallback(() => {
|
||||
textareaRef.current?.focus()
|
||||
}, [])
|
||||
|
||||
const resizeTextArea = useCallback(
|
||||
(force: boolean = false) => {
|
||||
const textArea = textareaRef.current?.resizableTextArea?.textArea
|
||||
@ -470,9 +474,9 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
|
||||
setTimeout(() => resizeTextArea(), 0)
|
||||
return newText
|
||||
})
|
||||
textareaRef.current?.focus()
|
||||
focusTextarea()
|
||||
},
|
||||
[resizeTextArea]
|
||||
[resizeTextArea, focusTextarea]
|
||||
)
|
||||
|
||||
const onPause = async () => {
|
||||
@ -485,6 +489,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
|
||||
await delay(1)
|
||||
}
|
||||
EventEmitter.emit(EVENT_NAMES.CLEAR_MESSAGES, topic)
|
||||
focusTextarea()
|
||||
}
|
||||
|
||||
const onNewContext = () => {
|
||||
@ -670,7 +675,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
|
||||
useShortcut('new_topic', () => {
|
||||
addNewTopic()
|
||||
EventEmitter.emit(EVENT_NAMES.SHOW_TOPIC_SIDEBAR)
|
||||
textareaRef.current?.focus()
|
||||
focusTextarea()
|
||||
})
|
||||
|
||||
useShortcut('clear_topic', clearTopic)
|
||||
@ -704,12 +709,17 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
|
||||
|
||||
useEffect(() => {
|
||||
if (!document.querySelector('.topview-fullscreen-container')) {
|
||||
const lastFocusedComponent = PasteService.getLastFocusedComponent()
|
||||
if (lastFocusedComponent === 'inputbar') {
|
||||
textareaRef.current?.focus()
|
||||
}
|
||||
focusTextarea()
|
||||
}
|
||||
}, [assistant, topic])
|
||||
}, [
|
||||
topic.id,
|
||||
assistant.mcpServers,
|
||||
assistant.knowledge_bases,
|
||||
assistant.enableWebSearch,
|
||||
assistant.webSearchProviderId,
|
||||
mentionedModels,
|
||||
focusTextarea
|
||||
])
|
||||
|
||||
useEffect(() => {
|
||||
const timerId = requestAnimationFrame(() => resizeTextArea())
|
||||
@ -734,12 +744,12 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
|
||||
const lastFocusedComponent = PasteService.getLastFocusedComponent()
|
||||
|
||||
if (!lastFocusedComponent || lastFocusedComponent === 'inputbar') {
|
||||
textareaRef.current?.focus()
|
||||
focusTextarea()
|
||||
}
|
||||
}
|
||||
window.addEventListener('focus', onFocus)
|
||||
return () => window.removeEventListener('focus', onFocus)
|
||||
}, [])
|
||||
}, [focusTextarea])
|
||||
|
||||
useEffect(() => {
|
||||
// if assistant knowledge bases are undefined return []
|
||||
@ -819,7 +829,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
|
||||
})
|
||||
}
|
||||
|
||||
textareaRef.current?.focus()
|
||||
focusTextarea()
|
||||
}
|
||||
|
||||
const isExpended = expended || !!textareaHeight
|
||||
|
||||
Loading…
Reference in New Issue
Block a user