From 3dd827e9d299b0f88d0a7049b5be6c893f8ab133 Mon Sep 17 00:00:00 2001
From: Joseph Licata <54822374+usnavy13@users.noreply.github.com>
Date: Mon, 17 Nov 2025 17:11:48 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20refactor:=20Update=20Avatar=20co?=
 =?UTF-8?q?mponent=20to=20improve=20file=20selection=20handling=20(#10555)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Refactored `openFileDialog` to use `useCallback` for better performance.
* Introduced `handleSelectFileClick` to manage file selection click events, enhancing user interaction.
---
 .../src/components/Nav/SettingsTabs/Account/Avatar.tsx   | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Nav/SettingsTabs/Account/Avatar.tsx b/client/src/components/Nav/SettingsTabs/Account/Avatar.tsx
index ed677f771a..e8b4437368 100644
--- a/client/src/components/Nav/SettingsTabs/Account/Avatar.tsx
+++ b/client/src/components/Nav/SettingsTabs/Account/Avatar.tsx
@@ -134,8 +134,13 @@ function Avatar() {
     e.preventDefault();
   }, []);
 
-  const openFileDialog = () => {
+  const openFileDialog = useCallback(() => {
     fileInputRef.current?.click();
+  }, []);
+
+  const handleSelectFileClick = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    openFileDialog();
   };
 
   const resetImage = useCallback(() => {
@@ -341,7 +346,7 @@ function Avatar() {
                       : '2MB',
                 })}
               </p>
-              <Button type="button" variant="secondary" onClick={openFileDialog}>
+              <Button type="button" variant="secondary" onClick={handleSelectFileClick}>
                 {localize('com_ui_select_file')}
               </Button>
               <input