test: add flushsync to fix uploader flaky tests

TeselaGen · Aug 28, 2024 · 0e42f3c · 0e42f3c
1 parent 672498d
commit 0e42f3c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/packages/ui/src/DataTable/ColumnFilterMenu.js b/packages/ui/src/DataTable/ColumnFilterMenu.js
@@ -49,7 +49,7 @@ export const ColumnFilterMenu = ({
       <Icon
         style={{ marginLeft: 5 }}
         icon="filter"
-        iconSize={extraCompact ? 14 : undefined}
+        size={extraCompact ? 14 : undefined}
         onClick={() => setColumnFilterMenuOpen(prev => !prev)}
         className={classNames("tg-filter-menu-button", {
           "tg-active-filter": !!filterActiveForColumn

diff --git a/packages/ui/src/FormComponents/Uploader.js b/packages/ui/src/FormComponents/Uploader.js
@@ -41,6 +41,7 @@ import classNames from "classnames";
 import convertSchema from "../DataTable/utils/convertSchema";
 import { LoadingDots } from "./LoadingDots";
 import { useDispatch } from "react-redux";
+import { flushSync } from "react-dom";
 
 const manualEnterMessage = "Build CSV File";
 const manualEnterSubMessage = "Paste or type data to build a CSV file";
@@ -249,11 +250,13 @@ const Uploader = ({
   // onChange received from redux-form is not working anymore,
   // so we need to overwrite it for redux to works.
   const onChange = val => {
-    if (noRedux) {
-      return _onChange(val);
-    }
-    dispatch(touch(formName, name));
-    return dispatch(change(formName, name, val));
+    flushSync(() => {
+      if (noRedux) {
+        return _onChange(val);
+      }
+      dispatch(touch(formName, name));
+      dispatch(change(formName, name, val));
+    });
   };
 
   const handleSecondHalfOfUpload = async ({