fix(react-dom): make whileElementsMounted reactive (#2735)

Co-authored-by: GitHub Actions <github-actions@github.com>

.changeset/sharp-turtles-press.md

@@ -0,0 +1,5 @@
+---
+"@floating-ui/react-dom": patch
+---
+
+fix: make `whileElementsMounted` reactive with respect from changing from a function to `undefined`

packages/dom/test/functional/autoUpdate.test.ts

@@ -34,3 +34,24 @@ import {click} from './utils/click';
     );
   });
 });
+
+test.only(`reactive whileElementsMounted`, async ({page}) => {
+  await page.goto('http://localhost:1234/autoUpdate');
+
+  // option is `false` on mount by default, so test that changing it to `true`
+  // works
+  await click(page, `[data-testid="whileElementsMounted-true"]`);
+  await page.evaluate(() => window.scrollTo(0, 25));
+
+  expect(await page.locator('.container').screenshot()).toMatchSnapshot(
+    `whileElementsMounted-true.png`,
+  );
+
+  // test that changing it back to `undefined` works
+  await click(page, `[data-testid="whileElementsMounted-false"]`);
+  await page.evaluate(() => window.scrollTo(0, 50));
+
+  expect(await page.locator('.container').screenshot()).toMatchSnapshot(
+    `whileElementsMounted-false.png`,
+  );
+});

packages/dom/test/visual/spec/AutoUpdate.tsx

@@ -26,9 +26,11 @@ export function AutoUpdate() {
 
   const [referenceSize, setReferenceSize] = useState(200);
   const [floatingSize, setFloatingSize] = useState(100);
+  const [whileElementsMounted, setWhileElementsMounted] = useState(false);
 
   const {x, y, strategy, refs, update} = useFloating({
     strategy: 'fixed',
+    whileElementsMounted: whileElementsMounted ? autoUpdate : undefined,
   });
 
   useLayoutEffect(() => {
@@ -181,6 +183,24 @@ export function AutoUpdate() {
           </button>
         ))}
       </Controls>
+
+      <h2>Reactive whileElementsMounted</h2>
+      <Controls>
+        {[true, false].map((bool) => (
+          <button
+            key={String(bool)}
+            onClick={() => {
+              setWhileElementsMounted(bool);
+            }}
+            data-testid={`whileElementsMounted-${bool}`}
+            style={{
+              backgroundColor: whileElementsMounted === bool ? 'black' : '',
+            }}
+          >
+            {String(bool)}
+          </button>
+        ))}
+      </Controls>
     </>
   );
 }

packages/react-dom/src/useFloating.ts

@@ -72,6 +72,7 @@ export function useFloating<RT extends ReferenceType = ReferenceType>(
   const floatingRef = React.useRef<HTMLElement | null>(null);
   const dataRef = React.useRef(data);
 
+  const hasWhileElementsMounted = whileElementsMounted != null;
   const whileElementsMountedRef = useLatestRef(whileElementsMounted);
   const platformRef = useLatestRef(platform);
 
@@ -129,7 +130,13 @@ export function useFloating<RT extends ReferenceType = ReferenceType>(
 
       update();
     }
-  }, [referenceEl, floatingEl, update, whileElementsMountedRef]);
+  }, [
+    referenceEl,
+    floatingEl,
+    update,
+    whileElementsMountedRef,
+    hasWhileElementsMounted,
+  ]);
 
   const refs = React.useMemo(
     () => ({