fix: fileUpload onRemove clashes with onChange [FC-1234] (#2464)

* chore: call onChange in case of fileupload * chore: added flushsync * chore: update file upload onRemove clashes with onchange * Update .changeset/modern-geckos-relate.md Co-authored-by: Saurabh Daware <[email protected]> * chore: add note in change log --------- Co-authored-by: Saurabh Daware <[email protected]>
razorpay · Jan 21, 2025 · 455e965 · 455e965
1 parent 964ee14
commit 455e965
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/.changeset/modern-geckos-relate.md b/.changeset/modern-geckos-relate.md
@@ -0,0 +1,9 @@
+---
+'@razorpay/blade': patch
+---
+
+fix(FileUpload): fileupload on remove clashes with onchage
+
+> [!NOTE]
+>
+> Previously, onChange did not provide an updated value when a file was removed. Now, when a file is removed from FileUpload, onChange will return the updated value.
diff --git a/packages/blade/src/components/FileUpload/FileUpload.web.tsx b/packages/blade/src/components/FileUpload/FileUpload.web.tsx
@@ -1,4 +1,5 @@
 import { useState, useCallback, useMemo, useRef, forwardRef } from 'react';
+import { flushSync } from 'react-dom';
 import type { FileUploadProps, BladeFile, BladeFileList } from './types';
 import { StyledFileUploadWrapper } from './StyledFileUploadWrapper';
 import {
@@ -312,7 +313,9 @@ const _FileUpload: React.ForwardRefRenderFunction<BladeElementRef, FileUploadPro
             size={size}
             onRemove={() => {
               const newFiles = selectedFiles.filter(({ id }) => id !== selectedFiles[0].id);
-              setSelectedFiles(() => newFiles);
+              flushSync(() => {
+                setSelectedFiles(() => newFiles);
+              });
               onRemove?.({ file: selectedFiles[0] });
               fireNativeEvent(inputRef, ['change', 'input']);
             }}
@@ -374,7 +377,9 @@ const _FileUpload: React.ForwardRefRenderFunction<BladeElementRef, FileUploadPro
               size={size}
               onRemove={() => {
                 const newFiles = selectedFiles.filter(({ id }) => id !== file.id);
-                setSelectedFiles(() => newFiles);
+                flushSync(() => {
+                  setSelectedFiles(() => newFiles);
+                });
                 onRemove?.({ file });
                 fireNativeEvent(inputRef, ['change', 'input']);
               }}