From ea7d534bcabb6420dc787ed801d0678a456f4106 Mon Sep 17 00:00:00 2001 From: Amber Date: Tue, 5 Sep 2023 15:52:29 +0200 Subject: [PATCH 1/2] Revert "fix(react-utilities): click scrollbar should invoke callback in `useOnClickOutside` (#28965)" This reverts commit 17f08ac2e61d5f569067e78832096a54c3966d0b. --- .../react-utilities/src/hooks/useOnClickOutside.test.ts | 2 +- .../react-utilities/src/hooks/useOnClickOutside.ts | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) 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 575ec75bb5c34..530598e9732d7 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 ff01345078de2..74b414a8b8ed5 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); From 9a3face85061a41ad23be640b97d4c7009c16714 Mon Sep 17 00:00:00 2001 From: Amber Date: Tue, 5 Sep 2023 14:57:26 +0000 Subject: [PATCH 2/2] chg --- ...act-utilities-2fe350f8-8a8e-41ae-96c9-421c774a117f.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-utilities-2fe350f8-8a8e-41ae-96c9-421c774a117f.json 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 0000000000000..0a2558fecc235 --- /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" +}