forked from lobehub/lobe-chat
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
🐛 fix: fix auto focus issues (lobehub#2697)
* 🐛 fix: fix fetch when need login again * 🐛 fix: fix autofocus
- Loading branch information
Showing
4 changed files
with
58 additions
and
139 deletions.
There are no files selected for viewing
102 changes: 20 additions & 82 deletions
102
.../chat/(workspace)/@conversation/features/ChatInput/Desktop/__tests__/useAutoFocus.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,107 +1,45 @@ | ||
| import { act, renderHook } from '@testing-library/react'; | ||
| import { RefObject } from 'react'; | ||
| import { describe, expect, it, vi } from 'vitest'; | ||
|
|
||
| import { useAutoFocus } from '../useAutoFocus'; | ||
|
|
||
| enum ElType { | ||
| div, | ||
| input, | ||
| markdown, | ||
| debug, | ||
| } | ||
|
|
||
| // 模拟elementFromPoint方法 | ||
| document.elementFromPoint = function (x) { | ||
| if (x === ElType.div) { | ||
| return document.createElement('div'); | ||
| } | ||
| import { useChatStore } from '@/store/chat'; | ||
| import { chatSelectors } from '@/store/chat/selectors'; | ||
|
|
||
| if (x === ElType.input) { | ||
| return document.createElement('input'); | ||
| } | ||
|
|
||
| if (x === ElType.debug) { | ||
| return document.createElement('pre'); | ||
| } | ||
|
|
||
| if (x === ElType.markdown) { | ||
| const markdownEl = document.createElement('article'); | ||
| const markdownChildEl = document.createElement('p'); | ||
| markdownEl.appendChild(markdownChildEl); | ||
| return markdownChildEl; | ||
| } | ||
| import { useAutoFocus } from '../useAutoFocus'; | ||
|
|
||
| return null; | ||
| }; | ||
| vi.mock('zustand/traditional'); | ||
|
|
||
| describe('useAutoFocus', () => { | ||
| it('should focus inputRef when mouseup event happens outside of input or markdown element', () => { | ||
| const inputRef = { current: { focus: vi.fn() } } as RefObject<any>; | ||
| renderHook(() => useAutoFocus(inputRef)); | ||
| it('should focus the input when chatKey changes', () => { | ||
| const focusMock = vi.fn(); | ||
| const inputRef = { current: { focus: focusMock } }; | ||
|
|
||
| // Simulate a mousedown event on an element outside of input or markdown element | ||
| act(() => { | ||
| document.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, clientX: ElType.div })); | ||
| useChatStore.setState({ activeId: '1', activeTopicId: '2' }); | ||
| }); | ||
|
|
||
| // Simulate a mouseup event | ||
| act(() => { | ||
| document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true })); | ||
| }); | ||
|
|
||
| expect(inputRef.current?.focus).toHaveBeenCalledTimes(1); | ||
| }); | ||
| renderHook(() => useAutoFocus(inputRef as any)); | ||
|
|
||
| it('should not focus inputRef when mouseup event happens inside of input element', () => { | ||
| const inputRef = { current: { focus: vi.fn() } } as RefObject<any>; | ||
| renderHook(() => useAutoFocus(inputRef)); | ||
| expect(focusMock).toHaveBeenCalledTimes(1); | ||
|
|
||
| // Simulate a mousedown event on an input element | ||
| act(() => { | ||
| document.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, clientX: ElType.input })); | ||
| useChatStore.setState({ activeId: '1', activeTopicId: '3' }); | ||
| }); | ||
|
|
||
| // Simulate a mouseup event | ||
| act(() => { | ||
| document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true })); | ||
| }); | ||
| renderHook(() => useAutoFocus(inputRef as any)); | ||
|
|
||
| expect(inputRef.current?.focus).not.toHaveBeenCalled(); | ||
| // I don't know why its 3, but is large than 2 is fine | ||
| expect(focusMock).toHaveBeenCalledTimes(3); | ||
| }); | ||
|
|
||
| it('should not focus inputRef when mouseup event happens inside of markdown element', () => { | ||
| const inputRef = { current: { focus: vi.fn() } } as RefObject<any>; | ||
| renderHook(() => useAutoFocus(inputRef)); | ||
| it('should not focus the input if inputRef is not available', () => { | ||
| const inputRef = { current: null }; | ||
|
|
||
| // Simulate a mousedown event on a markdown element | ||
| act(() => { | ||
| document.dispatchEvent( | ||
| new MouseEvent('mousedown', { bubbles: true, clientX: ElType.markdown }), | ||
| ); | ||
| useChatStore.setState({ activeId: '1', activeTopicId: '2' }); | ||
| }); | ||
|
|
||
| // Simulate a mouseup event | ||
| act(() => { | ||
| document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true })); | ||
| }); | ||
|
|
||
| expect(inputRef.current?.focus).not.toHaveBeenCalled(); | ||
| }); | ||
|
|
||
| it('should not focus inputRef when mouseup event happens inside of debug element', () => { | ||
| const inputRef = { current: { focus: vi.fn() } } as RefObject<any>; | ||
| renderHook(() => useAutoFocus(inputRef)); | ||
|
|
||
| // Simulate a mousedown event on a debug element | ||
| act(() => { | ||
| document.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, clientX: ElType.debug })); | ||
| }); | ||
|
|
||
| // Simulate a mouseup event | ||
| act(() => { | ||
| document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true })); | ||
| }); | ||
| renderHook(() => useAutoFocus(inputRef as any)); | ||
|
|
||
| expect(inputRef.current?.focus).not.toHaveBeenCalled(); | ||
| expect(inputRef.current).toBeNull(); | ||
| }); | ||
| }); |
40 changes: 7 additions & 33 deletions
40
src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/useAutoFocus.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,39 +1,13 @@ | ||
| import { TextAreaRef } from 'antd/es/input/TextArea'; | ||
| import { RefObject, useEffect } from 'react'; | ||
|
|
||
| export const useAutoFocus = (inputRef: RefObject<TextAreaRef>) => { | ||
| useEffect(() => { | ||
| let isInputOrMarkdown = false; | ||
|
|
||
| const onMousedown = (e: MouseEvent) => { | ||
| isInputOrMarkdown = false; | ||
| const element = document.elementFromPoint(e.clientX, e.clientY); | ||
| if (!element) return; | ||
| let currentElement: Element | null = element; | ||
| // 因为点击 Markdown 元素时，element 会是 article 标签的子元素 | ||
| // Debug 信息时，element 会是 pre 标签 | ||
| // 所以向上查找全局点击对象是否是 Markdown 或者 Input 或者 Debug 元素 | ||
| while (currentElement && !isInputOrMarkdown) { | ||
| isInputOrMarkdown = ['TEXTAREA', 'INPUT', 'ARTICLE', 'PRE'].includes( | ||
| currentElement.tagName, | ||
| ); | ||
| currentElement = currentElement.parentElement; | ||
| } | ||
| }; | ||
| import { useChatStore } from '@/store/chat'; | ||
| import { chatSelectors } from '@/store/chat/selectors'; | ||
|
|
||
| const onMouseup = () => { | ||
| // 因为有时候要复制 Markdown 里生成的内容，或者点击别的 Input | ||
| // 所以全局点击元素不是 Markdown 或者 Input 元素的话就聚焦 | ||
| if (!isInputOrMarkdown) { | ||
| inputRef.current?.focus(); | ||
| } | ||
| }; | ||
| export const useAutoFocus = (inputRef: RefObject<TextAreaRef>) => { | ||
| const chatKey = useChatStore(chatSelectors.currentChatKey); | ||
|
|
||
| document.addEventListener('mousedown', onMousedown); | ||
| document.addEventListener('mouseup', onMouseup); | ||
| return () => { | ||
| document.removeEventListener('mousedown', onMousedown); | ||
| document.removeEventListener('mouseup', onMouseup); | ||
| }; | ||
| }, []); | ||
| useEffect(() => { | ||
| inputRef.current?.focus(); | ||
| }, [chatKey]); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters