From 3be3f0f9c2acff95a943cf2d2339a80a4d712b3e Mon Sep 17 00:00:00 2001
From: Saurabh Daware <saurabh.daware@razorpay.com>
Date: Wed, 5 Feb 2025 12:52:02 +0530
Subject: [PATCH] fix(FileUpload): revert to not calling onChange on file
 remove (#2521)

* fix: revert to not calling onChange on file remove

* Create moody-coats-clean.md
---
 .changeset/moody-coats-clean.md                | 18 ++++++++++++++++++
 .../components/FileUpload/FileUpload.web.tsx   | 15 +++------------
 2 files changed, 21 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/moody-coats-clean.md

diff --git a/.changeset/moody-coats-clean.md b/.changeset/moody-coats-clean.md
new file mode 100644
index 00000000000..4dc41c0e0c6
--- /dev/null
+++ b/.changeset/moody-coats-clean.md
@@ -0,0 +1,18 @@
+---
+"@razorpay/blade": patch
+---
+
+fix(FileUpload): revert to not calling onChange on file remove
+
+> [!NOTE]
+>
+> Check the below timeline if you're upgrading from 11.34.1+ version to this version
+
+**Timeline of FileUpload changes**
+
+- In 11.34.1: We did not call onChange on removing of file. Only onRemove was called
+- In 11:36.2: We added dispatchEvent call which started calling onChange on onRemove (since React treats `input type="file"` differently than `input type="text"` - [CodeSandbox Link](https://codesandbox.io/p/sandbox/friendly-ishizaka-yk7mm3))
+- In 12.4.0: We released a fix thinking onChange call was expected behaviour and we just updated the state value for it
+- **This version:** Reverts back to 11.34.1 behaviour. If you're upgrading to this version from 11.34.1 or previous versions, the behaviour will stay same. If you're upgrading from 11.34.1+ and use FileUpload component, its recommended to test out FileUpload instances.
+
+
diff --git a/packages/blade/src/components/FileUpload/FileUpload.web.tsx b/packages/blade/src/components/FileUpload/FileUpload.web.tsx
index 8d9c1099ee0..fca20b393d3 100644
--- a/packages/blade/src/components/FileUpload/FileUpload.web.tsx
+++ b/packages/blade/src/components/FileUpload/FileUpload.web.tsx
@@ -1,5 +1,4 @@
 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 {
@@ -29,7 +28,6 @@ import { useMergeRefs } from '~utils/useMergeRefs';
 import { useControllableState } from '~utils/useControllable';
 import { getInnerMotionRef, getOuterMotionRef } from '~utils/getMotionRefs';
 import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';
-import { fireNativeEvent } from '~utils/fireNativeEvent';
 
 const _FileUpload: React.ForwardRefRenderFunction<BladeElementRef, FileUploadProps> = (
   {
@@ -163,7 +161,6 @@ const _FileUpload: React.ForwardRefRenderFunction<BladeElementRef, FileUploadPro
     if (!hasValidationErrors) {
       handleFilesChange(droppedFiles);
       onDrop?.({ name, fileList: allFiles });
-      fireNativeEvent(inputRef, ['change', 'input']);
     }
   };
 
@@ -313,11 +310,9 @@ const _FileUpload: React.ForwardRefRenderFunction<BladeElementRef, FileUploadPro
             size={size}
             onRemove={() => {
               const newFiles = selectedFiles.filter(({ id }) => id !== selectedFiles[0].id);
-              flushSync(() => {
-                setSelectedFiles(() => newFiles);
-              });
+              setSelectedFiles(() => newFiles);
+
               onRemove?.({ file: selectedFiles[0] });
-              fireNativeEvent(inputRef, ['change', 'input']);
             }}
             onReupload={() => {
               const newFiles = selectedFiles.filter(({ id }) => id !== selectedFiles[0].id);
@@ -377,11 +372,8 @@ const _FileUpload: React.ForwardRefRenderFunction<BladeElementRef, FileUploadPro
               size={size}
               onRemove={() => {
                 const newFiles = selectedFiles.filter(({ id }) => id !== file.id);
-                flushSync(() => {
-                  setSelectedFiles(() => newFiles);
-                });
+                setSelectedFiles(() => newFiles);
                 onRemove?.({ file });
-                fireNativeEvent(inputRef, ['change', 'input']);
               }}
               onReupload={() => {
                 const newFiles = selectedFiles.filter(({ id }) => id !== file.id);
@@ -400,7 +392,6 @@ const _FileUpload: React.ForwardRefRenderFunction<BladeElementRef, FileUploadPro
                 const newFiles = selectedFiles.filter(({ id }) => id !== file.id);
                 setSelectedFiles(() => newFiles);
                 onDismiss?.({ file });
-                fireNativeEvent(inputRef, ['change', 'input']);
               }}
               onPreview={onPreview}
             />