Merge pull request #6053 from Hacker0x01/remoe-flushsync

Remove flushSync usage in ShadowRoot component

Author: martijnrusschen

src/test/datepicker_test.test.tsx

@@ -922,6 +922,9 @@ describe("DatePicker", () => {
   });
 
   it("should not apply the calendarIconClassname to calendar icon with calendarIconClassName", () => {
+    // Suppress expected deprecation warning
+    const warnSpy = jest.spyOn(console, "warn").mockImplementation(() => {});
+
     const customClassName = "customClassName";
     const customClassname = "customClassname";
     const { container } = render(
@@ -942,9 +945,14 @@ describe("DatePicker", () => {
 
     expect(calendarIcon?.classList.contains(customClassName)).toBe(true);
     expect(calendarIcon?.classList.contains(customClassname)).toBe(false);
+
+    warnSpy.mockRestore();
   });
 
   it("should apply the calendarIconClassname to calendar icon without calendarIconClassName", () => {
+    // Suppress expected deprecation warning
+    const warnSpy = jest.spyOn(console, "warn").mockImplementation(() => {});
+
     const customClassname = "customClassName";
     const { container } = render(
       <DatePicker
@@ -962,6 +970,8 @@ describe("DatePicker", () => {
     );
 
     expect(calendarIcon?.classList.contains(customClassname)).toBe(true);
+
+    warnSpy.mockRestore();
   });
 
   it("should set the type attribute on the clear button to button", () => {

src/test/helper_components/shadow_root.tsx

@@ -1,34 +1,28 @@
 import React, {
   type FC,
   type PropsWithChildren,
-  useLayoutEffect,
-  useRef,
+  useCallback,
   useState,
 } from "react";
-import { createPortal, flushSync } from "react-dom";
+import { createPortal } from "react-dom";
 
 const ShadowRoot: FC<PropsWithChildren> = ({ children }) => {
   const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);
 
-  const containerRef = useRef<HTMLDivElement>(null);
-  const isInitializedRef = useRef(false);
-
-  useLayoutEffect(() => {
-    const container = containerRef.current;
-    if (isInitializedRef.current || !container) {
-      return;
-    }
-
-    const root =
-      container.shadowRoot ?? container.attachShadow({ mode: "open" });
-    isInitializedRef.current = true;
-    // Use flushSync to synchronously update state within effect, avoiding cascading renders
-    // while ensuring the shadow root is available immediately for tests
-    flushSync(() => setShadowRoot(root));
-  }, []);
+  const containerRefCallback = useCallback(
+    (container: HTMLDivElement | null) => {
+      if (!container) {
+        return;
+      }
+      const root =
+        container.shadowRoot ?? container.attachShadow({ mode: "open" });
+      setShadowRoot(root);
+    },
+    [],
+  );
 
   return (
-    <div ref={containerRef}>
+    <div ref={containerRefCallback}>
       {shadowRoot && createPortal(children, shadowRoot)}
     </div>
   );

src/test/index.ts

@@ -7,19 +7,22 @@ expect.extend(toHaveNoViolations);
 const originalError = console.error;
 beforeAll(() => {
   console.error = (...args) => {
-    // Check the first argument (the error message)
-    const firstArg = args[0];
-    const firstArgStr =
-      typeof firstArg === "string"
-        ? firstArg
-        : firstArg instanceof Error
-          ? firstArg.message
-          : String(firstArg);
+    // Convert all arguments to a single string for checking
+    const fullMessage = args
+      .map((arg) =>
+        typeof arg === "string"
+          ? arg
+          : arg instanceof Error
+            ? arg.message
+            : String(arg),
+      )
+      .join(" ");
 
-    // Suppress floating-ui act warnings
+    // Suppress floating-ui act warnings - these come from @floating-ui/react-dom
+    // internally using flushSync, which is expected behavior
     if (
-      firstArgStr.includes("An update to withFloating(PopperComponent)") &&
-      firstArgStr.includes("inside a test was not wrapped in act")
+      fullMessage.includes("withFloating(PopperComponent)") &&
+      fullMessage.includes("not wrapped in act")
     ) {
       return;
     }