From efe0e48cd5ec97d376b6b3cff8d74fc911645ed0 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Wed, 23 Aug 2023 18:09:04 +0200 Subject: [PATCH 1/3] change --- .../react-utilities/src/hooks/useOnClickOutside.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts b/packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts index e1032f0616230..e21a0611772b2 100644 --- a/packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts +++ b/packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts @@ -89,9 +89,8 @@ 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('contextmenu', conditionalHandler, true); + element?.addEventListener('mouseup', conditionalHandler, true); element?.addEventListener('mousedown', handleMouseDown, true); // Garbage collect this event after it's no longer useful to avoid memory leaks @@ -100,9 +99,8 @@ export const useOnClickOutside = (options: UseOnClickOrScrollOutsideOptions) => }, 1); return () => { - element?.removeEventListener('click', conditionalHandler, true); element?.removeEventListener('touchstart', conditionalHandler, true); - element?.removeEventListener('contextmenu', conditionalHandler, true); + element?.removeEventListener('mouseup', conditionalHandler, true); element?.removeEventListener('mousedown', handleMouseDown, true); clearTimeout(timeoutId.current); From da005a5e93c34635f91ff9840ba8ed47ba53d3d8 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Wed, 23 Aug 2023 18:49:43 +0200 Subject: [PATCH 2/3] chglog --- ...act-utilities-bdfc2f99-6dbb-4819-8c64-ce9383c3d94d.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-utilities-bdfc2f99-6dbb-4819-8c64-ce9383c3d94d.json diff --git a/change/@fluentui-react-utilities-bdfc2f99-6dbb-4819-8c64-ce9383c3d94d.json b/change/@fluentui-react-utilities-bdfc2f99-6dbb-4819-8c64-ce9383c3d94d.json new file mode 100644 index 0000000000000..1cfa02fa96381 --- /dev/null +++ b/change/@fluentui-react-utilities-bdfc2f99-6dbb-4819-8c64-ce9383c3d94d.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: `useOnClickOutside` should invoke callback on clicking scrollbar", + "packageName": "@fluentui/react-utilities", + "email": "yuanboxue@microsoft.com", + "dependentChangeType": "patch" +} From a0ea0846fc27bf19e58aa0b0ce3c201b1c762a18 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Wed, 23 Aug 2023 19:06:31 +0200 Subject: [PATCH 3/3] UT --- .../react-utilities/src/hooks/useOnClickOutside.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 31ae3cafc5e01..00a0a2baf312a 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 = ['click', 'touchstart', 'contextmenu', 'fuiframefocus', 'mousedown']; + const supportedEvents = ['mouseup', 'touchstart', 'fuiframefocus', 'mousedown']; it.each(supportedEvents)('should add %s listener', event => { // Arrange