From 8e855913f6d152800c8de1c556605d01ec26eb2c Mon Sep 17 00:00:00 2001
From: yinjiajun <316390862@qq.com>
Date: Wed, 1 Jul 2026 15:22:22 +0800
Subject: [PATCH] fix: center clicked suggestion
---
.../elements/__tests__/suggestion.test.tsx | 18 ++++++++++++++++++
packages/elements/src/suggestion.tsx | 17 +++++++++++++----
2 files changed, 31 insertions(+), 4 deletions(-)
diff --git a/packages/elements/__tests__/suggestion.test.tsx b/packages/elements/__tests__/suggestion.test.tsx
index 921d0861..52d5f28a 100644
--- a/packages/elements/__tests__/suggestion.test.tsx
+++ b/packages/elements/__tests__/suggestion.test.tsx
@@ -46,6 +46,24 @@ describe("suggestion", () => {
expect(onClick).toHaveBeenCalledWith("Test suggestion");
});
+ it("centers the clicked suggestion", async () => {
+ const scrollIntoView = vi
+ .spyOn(Element.prototype, "scrollIntoView")
+ .mockImplementation(vi.fn());
+ const user = userEvent.setup();
+
+ render();
+
+ const button = screen.getByRole("button");
+ await user.click(button);
+
+ expect(scrollIntoView).toHaveBeenCalledWith({
+ behavior: "smooth",
+ block: "nearest",
+ inline: "center",
+ });
+ });
+
it("applies default variant and size", () => {
render();
const button = screen.getByRole("button");
diff --git a/packages/elements/src/suggestion.tsx b/packages/elements/src/suggestion.tsx
index a35a8eb6..673821db 100644
--- a/packages/elements/src/suggestion.tsx
+++ b/packages/elements/src/suggestion.tsx
@@ -1,12 +1,13 @@
"use client";
+import type { ComponentProps, MouseEvent } from "react";
+
import { Button } from "@repo/shadcn-ui/components/ui/button";
import {
ScrollArea,
ScrollBar,
} from "@repo/shadcn-ui/components/ui/scroll-area";
import { cn } from "@repo/shadcn-ui/lib/utils";
-import type { ComponentProps } from "react";
import { useCallback } from "react";
export type SuggestionsProps = ComponentProps;
@@ -38,9 +39,17 @@ export const Suggestion = ({
children,
...props
}: SuggestionProps) => {
- const handleClick = useCallback(() => {
- onClick?.(suggestion);
- }, [onClick, suggestion]);
+ const handleClick = useCallback(
+ (event: MouseEvent) => {
+ event.currentTarget.scrollIntoView?.({
+ behavior: "smooth",
+ block: "nearest",
+ inline: "center",
+ });
+ onClick?.(suggestion);
+ },
+ [onClick, suggestion]
+ );
return (