From cb615ce9952d215e0c1ea01761210aa4b56e03a5 Mon Sep 17 00:00:00 2001
From: Will Scullin <scullin@scullin.com>
Date: Sat, 4 Jun 2022 11:06:38 -0700
Subject: [PATCH] Fix file name display

---
 js/components/FileChooser.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/js/components/FileChooser.tsx b/js/components/FileChooser.tsx
index 500772b..3d40724 100644
--- a/js/components/FileChooser.tsx
+++ b/js/components/FileChooser.tsx
@@ -102,7 +102,7 @@ const FilePickerChooser = ({
 }: FilePickerChooserProps) => {
     const [busy, setBusy] = useState<boolean>(false);
     const [selectedFilename, setSelectedFilename] = useState<string>();
-    const fileHandlesRef = useRef<FileSystemFileHandle[]>();
+    const [fileHandles, setFileHandles] = useState<FileSystemFileHandle[]>();
 
     const onClickInternal = useCallback(async () => {
         if (busy) {
@@ -115,8 +115,8 @@ const FilePickerChooser = ({
                 excludeAcceptAllOption: true,
                 types: accept,
             });
-            if (fileHandlesRef.current !== pickedFiles) {
-                fileHandlesRef.current = pickedFiles;
+            if (fileHandles !== pickedFiles) {
+                setFileHandles(pickedFiles);
                 onChange(pickedFiles);
             }
         } catch (e: unknown) {
@@ -124,14 +124,14 @@ const FilePickerChooser = ({
         } finally {
             setBusy(false);
         }
-    }, [accept, busy, onChange]);
+    }, [accept, busy, fileHandles, onChange]);
 
     useEffect(() => {
         setSelectedFilename(
-            fileHandlesRef.current?.length
-                ? fileHandlesRef.current[0].name
+            fileHandles?.length
+                ? fileHandles[0].name
                 : 'No file selected');
-    }, []);
+    }, [fileHandles]);
 
     return (
         <>