From 8f453984222a04ceab64505ff08e8b3bc736270f Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Wed, 25 Mar 2026 19:02:51 +0800
Subject: [PATCH] Fix: Using AvatarUpload in a dialog and pressing Enter will
 cause a file selection pop-up to appear. #13779 (#13780)

### What problem does this PR solve?
Fix: Using AvatarUpload in a dialog and pressing Enter will cause a file
selection pop-up to appear. #13779

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

---------

Co-authored-by: Jin Hai <haijin.chn@gmail.com>
---
 web/src/components/avatar-upload.tsx | 8 ++++++--
 web/src/components/ui/avatar.tsx     | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/web/src/components/avatar-upload.tsx b/web/src/components/avatar-upload.tsx
index a6a8c4e58..805e476a1 100644
--- a/web/src/components/avatar-upload.tsx
+++ b/web/src/components/avatar-upload.tsx
@@ -287,7 +287,9 @@ export const AvatarUpload = forwardRef<HTMLInputElement, AvatarUploadProps>(
               variant="dashed"
               size="icon"
               className="size-16 flex flex-col items-center gap-1 !bg-transparent"
-              onClick={() => {
+              type="button"
+              onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+                e.stopPropagation();
                 innerInputRef.current?.click();
               }}
             >
@@ -299,8 +301,10 @@ export const AvatarUpload = forwardRef<HTMLInputElement, AvatarUploadProps>(
               <Button
                 variant="transparent"
                 size="icon"
+                type="button"
                 className="group/button size-full p-0 transition-all relative gap-0 overflow-hidden"
-                onClick={() => {
+                onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+                  e.stopPropagation();
                   innerInputRef.current?.click();
                 }}
               >
diff --git a/web/src/components/ui/avatar.tsx b/web/src/components/ui/avatar.tsx
index 567b9e006..a78a94c64 100644
--- a/web/src/components/ui/avatar.tsx
+++ b/web/src/components/ui/avatar.tsx
@@ -86,7 +86,7 @@ export const AvatarGroup = ({
         return (
           <div key={index} className="-ml-2 hover:z-10 relative">
             {React.cloneElement(avatar as React.ReactElement<AvatarProps>, {
-              className: 'ring-2 ring-background',
+              className: cn('ring-2 ring-background', avatar.props.className),
             })}
           </div>
         );