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

@@ -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();
                 }}
               >

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>
         );