fix(react-positioning): reset overrideTargetRef when target from hook…

… option is undefined (#25135)

* reset overrideTargetRef

* chglog

* add screener test

* update fix and vr test

* try to stablize button with icon vr test

* Revert "try to stablize button with icon vr test"

This reverts commit fc46ab2.

apps/vr-tests-react-components/src/stories/Positioning.stories.tsx

@@ -442,6 +442,31 @@ const VirtualElement = () => {
   );
 };
 
+const ResetTarget = () => {
+  const [virtualElement, setVirtualElement] = React.useState<PositioningVirtualElement | null>(null);
+  const { containerRef, targetRef } = usePositioning({
+    position: 'below',
+    align: 'end',
+    target: virtualElement,
+  });
+
+  React.useEffect(() => {
+    if (virtualElement) {
+      setVirtualElement(null);
+    }
+  }, [virtualElement]);
+
+  return (
+    <>
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <button ref={setVirtualElement}>Virtual Target</button>
+        <button ref={targetRef}>Target should be fully visible</button>
+      </div>
+      <Box ref={containerRef}>Anchored to virtual element then reset to real target.</Box>
+    </>
+  );
+};
+
 const TargetProp = () => {
   const [target, setTarget] = React.useState<HTMLButtonElement | null>(null);
 
@@ -562,6 +587,7 @@ storiesOf('Positioning', module)
   .addStory('disable tether', () => <DisableTether />)
   .addStory('position fixed', () => <PositionAndAlignProps positionFixed />, { includeRtl: true })
   .addStory('virtual element', () => <VirtualElement />)
+  .addStory('reset target', () => <ResetTarget />)
   .addStory('target property', () => <TargetProp />)
   .addStory('imperative target', () => <ImperativeTarget />)
   .addStory('visibility modifiers', () => (

change/@fluentui-react-positioning-ee690504-067d-4a0c-b792-ea646433e13b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix `usePositioning` to reset `overrideTargetRef` when target in hook options is undefined",
+  "packageName": "@fluentui/react-positioning",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-positioning/src/usePositioning.ts

@@ -123,9 +123,7 @@ export function usePositioning(
   );
 
   useIsomorphicLayoutEffect(() => {
-    if (options.target) {
-      overrideTargetRef.current = options.target;
-    }
+    overrideTargetRef.current = options.target ?? null;
   }, [options.target, overrideTargetRef, containerRef]);
 
   useIsomorphicLayoutEffect(() => {