diff --git a/frontend/__tests__/components/chat/chat-input.test.tsx b/frontend/__tests__/components/chat/chat-input.test.tsx index e10e3d26f3ee..20cb71b84f28 100644 --- a/frontend/__tests__/components/chat/chat-input.test.tsx +++ b/frontend/__tests__/components/chat/chat-input.test.tsx @@ -1,5 +1,5 @@ import userEvent from "@testing-library/user-event"; -import { render, screen } from "@testing-library/react"; +import { fireEvent, render, screen } from "@testing-library/react"; import { describe, afterEach, vi, it, expect } from "vitest"; import { ChatInput } from "#/components/chat-input"; @@ -158,4 +158,46 @@ describe("ChatInput", () => { await user.tab(); expect(onBlurMock).toHaveBeenCalledOnce(); }); + + it("should handle text paste correctly", () => { + const onSubmit = vi.fn(); + const onChange = vi.fn(); + + render(); + + const input = screen.getByTestId("chat-input").querySelector("textarea"); + expect(input).toBeTruthy(); + + // Fire paste event with text data + fireEvent.paste(input!, { + clipboardData: { + getData: (type: string) => type === 'text/plain' ? 'test paste' : '', + files: [] + } + }); + }); + + it("should handle image paste correctly", () => { + const onSubmit = vi.fn(); + const onImagePaste = vi.fn(); + + render(); + + const input = screen.getByTestId("chat-input").querySelector("textarea"); + expect(input).toBeTruthy(); + + // Create a paste event with an image file + const file = new File(["dummy content"], "image.png", { type: "image/png" }); + + // Fire paste event with image data + fireEvent.paste(input!, { + clipboardData: { + getData: () => '', + files: [file] + } + }); + + // Verify image paste was handled + expect(onImagePaste).toHaveBeenCalledWith([file]); + }); }); diff --git a/frontend/src/components/chat-input.tsx b/frontend/src/components/chat-input.tsx index b6810b88cc06..6e223b5567c6 100644 --- a/frontend/src/components/chat-input.tsx +++ b/frontend/src/components/chat-input.tsx @@ -40,13 +40,18 @@ export function ChatInput({ const [isDraggingOver, setIsDraggingOver] = React.useState(false); const handlePaste = (event: React.ClipboardEvent) => { - event.preventDefault(); + // Only handle paste if we have an image paste handler and there are files if (onImagePaste && event.clipboardData.files.length > 0) { const files = Array.from(event.clipboardData.files).filter((file) => file.type.startsWith("image/"), ); - if (files.length > 0) onImagePaste(files); + // Only prevent default if we found image files to handle + if (files.length > 0) { + event.preventDefault(); + onImagePaste(files); + } } + // For text paste, let the default behavior handle it }; const handleDragOver = (event: React.DragEvent) => {