Revert fix: useOnScrollOutside should invoke callback on dragging scrollbar

change/@fluentui-react-utilities-376cc497-8a87-4b13-9138-34b3479b48e3.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Revert fix: useOnScrollOutside should invoke callback on dragging scrollbar",
+  "packageName": "@fluentui/react-utilities",
+  "email": "yuanboxue@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-utilities/src/hooks/useOnScrollOutside.test.ts

@@ -2,23 +2,21 @@ import { renderHook } from '@testing-library/react-hooks';
 import { useOnScrollOutside } from './useOnScrollOutside';
 
 describe('useOnScrollOutside', () => {
-  const supportedEvents = [{ event: 'wheel' }, { event: 'touchmove' }, { event: 'scroll', capture: true }];
+  const supportedEvents = ['wheel', 'touchmove'];
 
-  it.each(supportedEvents)('should add %s listener', ({ event, capture }) => {
+  it.each(supportedEvents)('should add %s listener', event => {
     // Arrange
     const element = { addEventListener: jest.fn(), removeEventListener: jest.fn() } as unknown as Document;
 
     // Act
     renderHook(() => useOnScrollOutside({ element, callback: jest.fn(), refs: [] }));
 
     // Assert
-    expect(element.addEventListener).toHaveBeenCalledTimes(supportedEvents.length);
-    expect(element.addEventListener).toHaveBeenCalledWith(
-      ...(capture ? [event, expect.anything(), true] : [event, expect.anything()]),
-    );
+    expect(element.addEventListener).toHaveBeenCalledTimes(2);
+    expect(element.addEventListener).toHaveBeenCalledWith(event, expect.anything());
   });
 
-  it.each(supportedEvents)('should cleanup %s listener', ({ event, capture }) => {
+  it.each(supportedEvents)('should cleanup %s listener', event => {
     // Arrange
     const element = { addEventListener: jest.fn(), removeEventListener: jest.fn() } as unknown as Document;
 
@@ -27,10 +25,8 @@ describe('useOnScrollOutside', () => {
     unmount();
 
     // Assert
-    expect(element.removeEventListener).toHaveBeenCalledTimes(supportedEvents.length);
-    expect(element.removeEventListener).toHaveBeenCalledWith(
-      ...(capture ? [event, expect.anything(), true] : [event, expect.anything()]),
-    );
+    expect(element.removeEventListener).toHaveBeenCalledTimes(2);
+    expect(element.removeEventListener).toHaveBeenCalledWith(event, expect.anything());
   });
 
   it('should not add or remove event listeners when disabled', () => {

packages/react-components/react-utilities/src/hooks/useOnScrollOutside.ts

@@ -9,15 +9,15 @@ import type { UseOnClickOrScrollOutsideOptions } from './useOnClickOutside';
 export const useOnScrollOutside = (options: UseOnClickOrScrollOutsideOptions) => {
   const { refs, callback, element, disabled, contains: containsProp } = options;
 
-  const listener = useEventCallback((ev: Event) => {
+  const listener = useEventCallback((ev: MouseEvent | TouchEvent) => {
     const contains: UseOnClickOrScrollOutsideOptions['contains'] =
       containsProp || ((parent, child) => !!parent?.contains(child));
 
     const target = ev.composedPath()[0] as HTMLElement;
     const isOutside = refs.every(ref => !contains(ref.current || null, target));
 
     if (isOutside && !disabled) {
-      callback(ev as MouseEvent | TouchEvent);
+      callback(ev);
     }
   });
 
@@ -28,13 +28,10 @@ export const useOnScrollOutside = (options: UseOnClickOrScrollOutsideOptions) =>
 
     element?.addEventListener('wheel', listener);
     element?.addEventListener('touchmove', listener);
-    // use capture phase because scroll does not bubble
-    element?.addEventListener('scroll', listener, true);
 
     return () => {
       element?.removeEventListener('wheel', listener);
       element?.removeEventListener('touchmove', listener);
-      element?.removeEventListener('scroll', listener, true);
     };
   }, [listener, element, disabled]);
 };