From e94aba0d519956ca391d473eb52df04301b9e470 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Thu, 5 Oct 2023 15:40:45 +0200 Subject: [PATCH 1/3] Revert "fix(react-utilities): drag scrollbar should invoke callback in `useOnScrollOutside` with event type cast (#29062)" This reverts commit e1a882487376a105505801ff30bbb9dc103c73f2. --- .../src/hooks/useOnScrollOutside.test.ts | 18 +++++++----------- .../src/hooks/useOnScrollOutside.ts | 7 ++----- 2 files changed, 9 insertions(+), 16 deletions(-) diff --git a/packages/react-components/react-utilities/src/hooks/useOnScrollOutside.test.ts b/packages/react-components/react-utilities/src/hooks/useOnScrollOutside.test.ts index 0fe9d82959ace3..669c369ba831ba 100644 --- a/packages/react-components/react-utilities/src/hooks/useOnScrollOutside.test.ts +++ b/packages/react-components/react-utilities/src/hooks/useOnScrollOutside.test.ts @@ -2,9 +2,9 @@ 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; @@ -12,13 +12,11 @@ describe('useOnScrollOutside', () => { 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', () => { diff --git a/packages/react-components/react-utilities/src/hooks/useOnScrollOutside.ts b/packages/react-components/react-utilities/src/hooks/useOnScrollOutside.ts index f6d6ce6246c99b..86043fe1c60320 100644 --- a/packages/react-components/react-utilities/src/hooks/useOnScrollOutside.ts +++ b/packages/react-components/react-utilities/src/hooks/useOnScrollOutside.ts @@ -9,7 +9,7 @@ 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)); @@ -17,7 +17,7 @@ export const useOnScrollOutside = (options: UseOnClickOrScrollOutsideOptions) => 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]); }; From 56364bb2f1a592dc0f2a737453a745baf24ac0fb Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Thu, 5 Oct 2023 15:41:30 +0200 Subject: [PATCH 2/3] chg --- ...act-utilities-376cc497-8a87-4b13-9138-34b3479b48e3.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-utilities-376cc497-8a87-4b13-9138-34b3479b48e3.json diff --git a/change/@fluentui-react-utilities-376cc497-8a87-4b13-9138-34b3479b48e3.json b/change/@fluentui-react-utilities-376cc497-8a87-4b13-9138-34b3479b48e3.json new file mode 100644 index 00000000000000..6d4df0ef1aad9c --- /dev/null +++ b/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" +} From ecf2bcccf5460d84170f41a3787300c5216e4bdb Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Thu, 5 Oct 2023 15:43:24 +0200 Subject: [PATCH 3/3] whitespace --- ...ui-react-utilities-376cc497-8a87-4b13-9138-34b3479b48e3.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/change/@fluentui-react-utilities-376cc497-8a87-4b13-9138-34b3479b48e3.json b/change/@fluentui-react-utilities-376cc497-8a87-4b13-9138-34b3479b48e3.json index 6d4df0ef1aad9c..d9f1ffef1490be 100644 --- a/change/@fluentui-react-utilities-376cc497-8a87-4b13-9138-34b3479b48e3.json +++ b/change/@fluentui-react-utilities-376cc497-8a87-4b13-9138-34b3479b48e3.json @@ -1,6 +1,6 @@ { "type": "patch", - "comment": "Revert fix: useOnScrollOutside should invoke callback on dragging scrollbar ", + "comment": "Revert fix: useOnScrollOutside should invoke callback on dragging scrollbar", "packageName": "@fluentui/react-utilities", "email": "yuanboxue@microsoft.com", "dependentChangeType": "patch"