fixed import settings button keep disabled after cancel file input

eric2788 · Oct 27, 2024 · 5f18349 · 5f18349
1 parent 6b6011d
commit 5f18349
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/src/hooks/form.ts b/src/hooks/form.ts
@@ -5,6 +5,12 @@ export function useFileInput(onFileChange: (files: FileList) => Promise<void>, o
     const inputRef = useRef<HTMLInputElement>()
     const selectFiles = useCallback(function (): Promise<void> {
         return new Promise((resolve, reject) => {
+            const finallize = () => {
+                inputRef.current.removeEventListener('change', listener)
+                inputRef.current.removeEventListener('cancel', finallize)
+                inputRef.current.files = null
+                resolve()
+            }
             const listener = async (e: Event) => {
                 try {
                     const files = (e.target as HTMLInputElement).files
@@ -15,12 +21,11 @@ export function useFileInput(onFileChange: (files: FileList) => Promise<void>, o
                     onError?.(e)
                     reject(e)
                 } finally {
-                    inputRef.current.removeEventListener('change', listener)
-                    inputRef.current.files = null
-                    resolve()
+                    finallize()
                 }
             }
             inputRef.current.addEventListener('change', listener)
+            inputRef.current.addEventListener('cancel', finallize)
             inputRef.current.click()
         })
     }, deps)