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]>

Author: tewarig

.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.

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']);
               }}