diff --git a/src/renderer/src/components/native-chat/NativeChatComposer.tsx b/src/renderer/src/components/native-chat/NativeChatComposer.tsx index 44a6d8b865dc..e4e9e97659a5 100644 --- a/src/renderer/src/components/native-chat/NativeChatComposer.tsx +++ b/src/renderer/src/components/native-chat/NativeChatComposer.tsx @@ -66,6 +66,7 @@ const NativeChatComposerPane = forwardRef[0]) => diff --git a/src/renderer/src/components/native-chat/NativeChatJumpToLatest.tsx b/src/renderer/src/components/native-chat/NativeChatJumpToLatest.tsx index 66a0d4e88306..7b041b3c4b7b 100644 --- a/src/renderer/src/components/native-chat/NativeChatJumpToLatest.tsx +++ b/src/renderer/src/components/native-chat/NativeChatJumpToLatest.tsx @@ -7,7 +7,7 @@ import { ArrowDown } from 'lucide-react' import { translate } from '@/i18n/i18n' /** Keeps focus where the reader was typing: a pointer press never moves it here. */ -function keepFocus(event: React.MouseEvent): void { +export function keepFocus(event: React.MouseEvent): void { event.preventDefault() } @@ -27,7 +27,7 @@ export function NativeChatJumpToLatest({ aria-hidden={!visible || undefined} onMouseDown={keepFocus} onClick={onJump} - className="absolute bottom-3 left-1/2 flex h-8 -translate-x-1/2 items-center gap-1.5 rounded-full border border-border bg-popover px-3 text-xs font-medium text-popover-foreground shadow-floating transition-[opacity,translate] duration-150 ease-out hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none data-[shown=false]:pointer-events-none data-[shown=false]:translate-y-1 data-[shown=false]:opacity-0" + className="pointer-events-auto flex h-8 items-center gap-1.5 rounded-full border border-border bg-popover px-3 text-xs font-medium text-popover-foreground shadow-floating transition-[opacity,translate] duration-150 ease-out hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none data-[shown=false]:pointer-events-none data-[shown=false]:translate-y-1 data-[shown=false]:opacity-0" > {label} diff --git a/src/renderer/src/components/native-chat/NativeChatJumpToTop.test.tsx b/src/renderer/src/components/native-chat/NativeChatJumpToTop.test.tsx new file mode 100644 index 000000000000..0ba0c5c028fc --- /dev/null +++ b/src/renderer/src/components/native-chat/NativeChatJumpToTop.test.tsx @@ -0,0 +1,45 @@ +// @vitest-environment happy-dom + +import '@testing-library/jest-dom/vitest' + +import { cleanup, screen } from '@testing-library/react' +import userEvent from '@testing-library/user-event' +import { afterEach, expect, it, vi } from 'vitest' +import { render } from './native-chat-app-root-test-render' +import { NativeChatJumpToTop } from './NativeChatJumpToTop' + +afterEach(cleanup) + +// The reader is usually mid-draft when they reach for this: a press must not take the caret. +it('leaves focus in the composer when pressed with the pointer', async () => { + const startFromBeginning = vi.fn() + render( + <> + +