diff --git a/change/@fluentui-react-utilities-2fe350f8-8a8e-41ae-96c9-421c774a117f.json b/change/@fluentui-react-utilities-2fe350f8-8a8e-41ae-96c9-421c774a117f.json
new file mode 100644
index 00000000000000..0a2558fecc2351
--- /dev/null
+++ b/change/@fluentui-react-utilities-2fe350f8-8a8e-41ae-96c9-421c774a117f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Revert fix: `useOnClickOutside` should invoke callback on clicking scrollbar",
+  "packageName": "@fluentui/react-utilities",
+  "email": "yuanboxue@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-utilities/src/hooks/useOnClickOutside.test.ts b/packages/react-components/react-utilities/src/hooks/useOnClickOutside.test.ts
index 575ec75bb5c342..530598e9732d72 100644
--- a/packages/react-components/react-utilities/src/hooks/useOnClickOutside.test.ts
+++ b/packages/react-components/react-utilities/src/hooks/useOnClickOutside.test.ts
@@ -6,7 +6,7 @@ describe('useOnClickOutside', () => {
     jest.useRealTimers();
   });
 
-  const supportedEvents = ['mouseup', 'touchstart', 'fuiframefocus', 'mousedown'];
+  const supportedEvents = ['click', 'touchstart', 'contextmenu', 'fuiframefocus', 'mousedown'];
 
   it.each(supportedEvents)('should add %s listener', event => {
     // Arrange
diff --git a/packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts b/packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts
index ff01345078de2e..74b414a8b8ed58 100644
--- a/packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts
+++ b/packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts
@@ -93,8 +93,9 @@ export const useOnClickOutside = (options: UseOnClickOrScrollOutsideOptions) =>
     };
 
     // use capture phase because React can update DOM before the event bubbles to the document
+    element?.addEventListener('click', conditionalHandler, true);
     element?.addEventListener('touchstart', conditionalHandler, true);
-    element?.addEventListener('mouseup', conditionalHandler, true);
+    element?.addEventListener('contextmenu', conditionalHandler, true);
     element?.addEventListener('mousedown', handleMouseDown, true);
 
     // Garbage collect this event after it's no longer useful to avoid memory leaks
@@ -103,8 +104,9 @@ export const useOnClickOutside = (options: UseOnClickOrScrollOutsideOptions) =>
     }, 1);
 
     return () => {
+      element?.removeEventListener('click', conditionalHandler, true);
       element?.removeEventListener('touchstart', conditionalHandler, true);
-      element?.removeEventListener('mouseup', conditionalHandler, true);
+      element?.removeEventListener('contextmenu', conditionalHandler, true);
       element?.removeEventListener('mousedown', handleMouseDown, true);
 
       clearTimeout(timeoutId.current);