From 374511bc52249bb826cfa5afe0000183ce1ec7b6 Mon Sep 17 00:00:00 2001
From: YuanboXue-Amber <yuanboxue@microsoft.com>
Date: Thu, 5 Oct 2023 17:24:53 +0200
Subject: [PATCH 1/2] test

---
 .../src/hooks/useOnScrollOutside.cy.tsx       | 115 ++++++++++++++++++
 1 file changed, 115 insertions(+)
 create mode 100644 packages/react-components/react-utilities/src/hooks/useOnScrollOutside.cy.tsx

diff --git a/packages/react-components/react-utilities/src/hooks/useOnScrollOutside.cy.tsx b/packages/react-components/react-utilities/src/hooks/useOnScrollOutside.cy.tsx
new file mode 100644
index 00000000000000..df682c1ef67028
--- /dev/null
+++ b/packages/react-components/react-utilities/src/hooks/useOnScrollOutside.cy.tsx
@@ -0,0 +1,115 @@
+import { mount } from '@cypress/react';
+import * as React from 'react';
+
+import { useOnScrollOutside } from './useOnScrollOutside';
+
+describe('useOnScrollOutside', () => {
+  it('should work', () => {
+    const onOutsideScroll = cy.spy();
+
+    const OutsideScrollExample: React.FC<{ onOutsideScroll: () => void }> = props => {
+      const innerRef = React.useRef<HTMLDivElement>(null);
+
+      useOnScrollOutside({
+        element: document,
+        callback: props.onOutsideScroll,
+        refs: [innerRef],
+      });
+
+      return (
+        <div>
+          <div
+            id="inside-scrollable-area"
+            ref={innerRef}
+            style={{
+              border: '3px solid blue',
+              padding: 20,
+              height: 100,
+              overflow: 'auto',
+            }}
+          >
+            <div style={{ height: 200 }} />
+          </div>
+
+          <div
+            id="outside-scrollable-area"
+            style={{
+              border: '3px solid salmon',
+              padding: 20,
+              height: 100,
+              overflow: 'auto',
+            }}
+          >
+            <div style={{ height: 200 }} />
+          </div>
+        </div>
+      );
+    };
+
+    mount(<OutsideScrollExample onOutsideScroll={onOutsideScroll} />);
+
+    cy.get('#inside-scrollable-area')
+      .trigger('wheel', { deltaY: 10 })
+      .then(() => {
+        expect(onOutsideScroll).not.to.be.called;
+      });
+
+    cy.get('#outside-scrollable-area')
+      .trigger('wheel', { deltaY: 10 })
+      .then(() => {
+        expect(onOutsideScroll).to.be.called;
+      });
+  });
+
+  it('should not trigger callback on browser-initiated scroll due to focus change', () => {
+    const onOutsideScroll = cy.spy();
+
+    const OutsideScrollExample: React.FC<{ onOutsideScroll: () => void }> = props => {
+      const innerRef = React.useRef<HTMLDivElement>(null);
+
+      useOnScrollOutside({
+        element: document,
+        callback: props.onOutsideScroll,
+        refs: [innerRef],
+      });
+
+      return (
+        <div
+          id="outside-area"
+          style={{
+            border: '3px solid salmon',
+            padding: 20,
+            height: 100,
+            overflow: 'auto',
+          }}
+        >
+          <div
+            id="inside-area"
+            ref={innerRef}
+            style={{
+              border: '3px solid blue',
+              padding: 20,
+              overflow: 'auto',
+            }}
+          >
+            <button id="inside-button">a button inside</button>
+          </div>
+
+          <div style={{ height: 200 }} />
+          <button id="outside-button">a button outside</button>
+        </div>
+      );
+    };
+
+    mount(<OutsideScrollExample onOutsideScroll={onOutsideScroll} />);
+
+    cy.get('#inside-button')
+      .click()
+      .realPress('Tab')
+      .get('#outside-button')
+      .should('be.focused')
+      .then(() => {
+        expect(onOutsideScroll).to.not.be.called;
+      });
+  });
+});

From 2ac1ba6eb444162472125a0ae4c4261bcaa45d46 Mon Sep 17 00:00:00 2001
From: YuanboXue-Amber <yuanboxue@microsoft.com>
Date: Thu, 5 Oct 2023 17:26:01 +0200
Subject: [PATCH 2/2] chg

---
 ...act-utilities-638b8284-f061-4808-853e-5987365c9c52.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-utilities-638b8284-f061-4808-853e-5987365c9c52.json

diff --git a/change/@fluentui-react-utilities-638b8284-f061-4808-853e-5987365c9c52.json b/change/@fluentui-react-utilities-638b8284-f061-4808-853e-5987365c9c52.json
new file mode 100644
index 00000000000000..265db3c214ce7f
--- /dev/null
+++ b/change/@fluentui-react-utilities-638b8284-f061-4808-853e-5987365c9c52.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: add e2e test for useOnScrollOutside",
+  "packageName": "@fluentui/react-utilities",
+  "email": "yuanboxue@microsoft.com",
+  "dependentChangeType": "patch"
+}