fix(useOnClickOutside): use conditional handler window event

change/@fluentui-react-utilities-52f78b5f-871c-4156-bb02-dd0c80a64ce8.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "useOnClickOutside, workaround for facebook/react#20074",
+  "packageName": "@fluentui/react-utilities",
+  "email": "lingfan.gao@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-utilities/src/hooks/useOnClickOutside.ts

@@ -33,6 +33,7 @@ export type UseOnClickOutsideOptions = {
  */
 export const useOnClickOutside = (options: UseOnClickOutsideOptions) => {
   const { refs, callback, element, disabled, contains: containsProp } = options;
+  const timeoutId = React.useRef<number | undefined>(undefined);
 
   const listener = useEventCallback((ev: MouseEvent | TouchEvent) => {
     const contains: UseOnClickOutsideOptions['contains'] =
@@ -45,14 +46,51 @@ export const useOnClickOutside = (options: UseOnClickOutsideOptions) => {
   });
 
   React.useEffect(() => {
+    // Store the current event to avoid triggering handlers immediately
+    // Note this depends on a deprecated but extremely well supported quirk of the web platform
+    // https://github.com/facebook/react/issues/20074
+    let currentEvent = getWindowEvent(window);
+
+    const conditionalHandler = (event: MouseEvent | TouchEvent) => {
+      // Skip if this event is the same as the one running when we added the handlers
+      if (event === currentEvent) {
+        currentEvent = undefined;
+        return;
+      }
+
+      listener(event);
+    };
+
     if (!disabled) {
-      element?.addEventListener('click', listener);
-      element?.addEventListener('touchstart', listener);
+      element?.addEventListener('click', conditionalHandler);
+      element?.addEventListener('touchstart', conditionalHandler);
     }
 
+    // Garbage collect this event after it's no longer useful to avoid memory leaks
+    timeoutId.current = setTimeout(() => {
+      currentEvent = undefined;
+    }, 1);
+
     return () => {
-      element?.removeEventListener('click', listener);
-      element?.removeEventListener('touchstart', listener);
+      element?.removeEventListener('click', conditionalHandler);
+      element?.removeEventListener('touchstart', conditionalHandler);
+
+      clearTimeout(timeoutId.current);
+      currentEvent = undefined;
     };
   }, [listener, element, disabled]);
 };
+
+const getWindowEvent = (target: Node | Window): Event | undefined => {
+  if (target) {
+    if (typeof (target as Window).window === 'object' && (target as Window).window === target) {
+      // eslint-disable-next-line deprecation/deprecation
+      return target.event;
+    }
+
+    // eslint-disable-next-line deprecation/deprecation
+    return (target as Node).ownerDocument?.defaultView?.event ?? undefined;
+  }
+
+  return undefined;
+};