From 6823bb4b570421f16eadb5a2825fe82cf7fcc761 Mon Sep 17 00:00:00 2001
From: Gerardas Butkevicius <10091419+GerardasB@users.noreply.github.com>
Date: Tue, 24 May 2022 18:29:16 +0300
Subject: [PATCH 1/5] Allow tippy.js to close the popup when the tab is
 clicked.

---
 ui/appui-layout-react/src/appui-layout-react/base/DragHandle.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/appui-layout-react/src/appui-layout-react/base/DragHandle.tsx b/ui/appui-layout-react/src/appui-layout-react/base/DragHandle.tsx
index 27b1835176ef..86ef3d5c3ead 100644
--- a/ui/appui-layout-react/src/appui-layout-react/base/DragHandle.tsx
+++ b/ui/appui-layout-react/src/appui-layout-react/base/DragHandle.tsx
@@ -66,7 +66,6 @@ export class DragHandle extends React.PureComponent<DragHandleProps, DragHandleS
 
     this.setState({ isPointerDown: true });
 
-    e.preventDefault();
     this._isDragged = false;
     this._initial = new Point(e.clientX, e.clientY);
   };

From a1b5bd66ba4bf7af01bc68b94c22d41e94329672 Mon Sep 17 00:00:00 2001
From: Gerardas Butkevicius <10091419+GerardasB@users.noreply.github.com>
Date: Wed, 25 May 2022 16:10:18 +0300
Subject: [PATCH 2/5] Prevent browser drag interaction when dragging a tab.

---
 .../src/appui-layout-react/base/PointerCaptor.tsx          | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/ui/appui-layout-react/src/appui-layout-react/base/PointerCaptor.tsx b/ui/appui-layout-react/src/appui-layout-react/base/PointerCaptor.tsx
index 5d8eb87ca67d..cdf5ecf82d62 100644
--- a/ui/appui-layout-react/src/appui-layout-react/base/PointerCaptor.tsx
+++ b/ui/appui-layout-react/src/appui-layout-react/base/PointerCaptor.tsx
@@ -55,7 +55,12 @@ export class PointerCaptor extends React.PureComponent<PointerCaptorProps> {
         style={this.props.style}
         role="presentation"
       >
-        <div className="nz-overlay" />
+        <div
+          className="nz-overlay"
+          onDragStart={(e)=> {
+            e.preventDefault();
+          }}
+        />
         {this.props.children}
       </div>
     );

From b8c8d50f0446a9b35e797bd16f99c961f191ed4d Mon Sep 17 00:00:00 2001
From: Gerardas Butkevicius <10091419+GerardasB@users.noreply.github.com>
Date: Wed, 25 May 2022 16:14:29 +0300
Subject: [PATCH 3/5]  Allow tippy.js to close the popup when the widget is
 resized.

---
 .../src/appui-layout-react/widget/rectangular/ResizeGrip.tsx     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/appui-layout-react/src/appui-layout-react/widget/rectangular/ResizeGrip.tsx b/ui/appui-layout-react/src/appui-layout-react/widget/rectangular/ResizeGrip.tsx
index b6df7351df59..69671ea275f3 100644
--- a/ui/appui-layout-react/src/appui-layout-react/widget/rectangular/ResizeGrip.tsx
+++ b/ui/appui-layout-react/src/appui-layout-react/widget/rectangular/ResizeGrip.tsx
@@ -137,7 +137,6 @@ export class ResizeGrip extends React.PureComponent<ResizeGripProps, ResizeGripS
     this._lastPosition = new Point(e.clientX, e.clientY);
 
     this._isResizing = true;
-    e.preventDefault();
 
     const bounds = Rectangle.create(grip.getBoundingClientRect());
     this.props.onResizeStart && this.props.onResizeStart({

From 2af888a374e71f791d56810050edbb9b0b71f016 Mon Sep 17 00:00:00 2001
From: Gerardas Butkevicius <10091419+GerardasB@users.noreply.github.com>
Date: Wed, 25 May 2022 16:14:42 +0300
Subject: [PATCH 4/5] Rush change.

---
 .../widget-tab-tippy_2022-05-25-13-12.json             | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 common/changes/@itwin/appui-layout-react/widget-tab-tippy_2022-05-25-13-12.json

diff --git a/common/changes/@itwin/appui-layout-react/widget-tab-tippy_2022-05-25-13-12.json b/common/changes/@itwin/appui-layout-react/widget-tab-tippy_2022-05-25-13-12.json
new file mode 100644
index 000000000000..c74da1d881a7
--- /dev/null
+++ b/common/changes/@itwin/appui-layout-react/widget-tab-tippy_2022-05-25-13-12.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/appui-layout-react",
+      "comment": "Allow tippy.js to close when tab is clicked.",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/appui-layout-react"
+}
\ No newline at end of file

From 681a1bdacc1902bb14ec4a1f325a858f0ce318dd Mon Sep 17 00:00:00 2001
From: Gerardas Butkevicius <10091419+GerardasB@users.noreply.github.com>
Date: Thu, 26 May 2022 16:20:40 +0300
Subject: [PATCH 5/5] Tests.

---
 .../src/test/base/PointerCaptor.test.snap        |  2 ++
 .../src/test/base/PointerCaptor.test.tsx         | 12 ++++++++++++
 .../src/test/widget/rectangular/tab/Tab.test.tsx | 16 ----------------
 3 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/ui/appui-layout-react/src/test/base/PointerCaptor.test.snap b/ui/appui-layout-react/src/test/base/PointerCaptor.test.snap
index f1af6f7ad002..7fb6add3d455 100644
--- a/ui/appui-layout-react/src/test/base/PointerCaptor.test.snap
+++ b/ui/appui-layout-react/src/test/base/PointerCaptor.test.snap
@@ -8,6 +8,7 @@ exports[`<PointerCaptor /> renders correctly 1`] = `
 >
   <div
     className="nz-overlay"
+    onDragStart={[Function]}
   />
 </div>
 `;
@@ -20,6 +21,7 @@ exports[`<PointerCaptor /> should respect isPointerDown prop over state 1`] = `
 >
   <div
     className="nz-overlay"
+    onDragStart={[Function]}
   />
 </div>
 `;
diff --git a/ui/appui-layout-react/src/test/base/PointerCaptor.test.tsx b/ui/appui-layout-react/src/test/base/PointerCaptor.test.tsx
index 144a0a87c897..f3fe6e7d3dc0 100644
--- a/ui/appui-layout-react/src/test/base/PointerCaptor.test.tsx
+++ b/ui/appui-layout-react/src/test/base/PointerCaptor.test.tsx
@@ -63,6 +63,18 @@ describe("<PointerCaptor />", () => {
 
     spy.calledOnce.should.true;
   });
+
+  it("should prevent default on drag start", () => {
+    const sut = mount(<PointerCaptor isPointerDown />);
+    const overlay = sut.find("div.nz-overlay");
+
+    const preventDefault = sinon.stub();
+    overlay.simulate("dragStart", {
+      preventDefault,
+    });
+
+    preventDefault.calledOnceWithExactly().should.true;
+  });
 });
 
 describe("usePointerCaptor", () => {
diff --git a/ui/appui-layout-react/src/test/widget/rectangular/tab/Tab.test.tsx b/ui/appui-layout-react/src/test/widget/rectangular/tab/Tab.test.tsx
index 2094f1a12bd0..f9b761ef231e 100644
--- a/ui/appui-layout-react/src/test/widget/rectangular/tab/Tab.test.tsx
+++ b/ui/appui-layout-react/src/test/widget/rectangular/tab/Tab.test.tsx
@@ -95,22 +95,6 @@ describe("<Tab />", () => {
     result.bottom.should.eq(0);
   });
 
-  it("should prevent default on pointer down", () => {
-    const sut = mount(<Tab
-      horizontalAnchor={HorizontalAnchor.Left}
-      mode={TabMode.Open}
-      verticalAnchor={VerticalAnchor.Middle}
-    />);
-    const pointerCaptor = sut.find(PointerCaptor);
-
-    const pointerDown = new PointerEvent("pointerdown");
-    const spy = sinon.spy(pointerDown, "preventDefault");
-
-    pointerCaptor.prop("onPointerDown")!(pointerDown);
-
-    spy.calledOnceWithExactly().should.true;
-  });
-
   it("should invoke onClick handler", () => {
     const spy = sinon.spy();
     const sut = mount(<Tab