From b49eb79e5fc63bcfeab3421cc00cc7e8cf115248 Mon Sep 17 00:00:00 2001
From: GerardasB <10091419+GerardasB@users.noreply.github.com>
Date: Wed, 15 Jan 2025 12:54:22 +0200
Subject: [PATCH] Fix `useWidget` hook issue when used in a popout widget
 (#1171)

* Fix useWidget hook issue.

* rush change

* Fix test
---
 .../issue-1170_2025-01-15-09-45.json          | 10 ++++++++
 e2e-tests/tests/popout-widget.test.ts         | 23 ++++++++++++++++++-
 .../appui-react/frontstage/FrontstageDef.tsx  |  1 +
 3 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 common/changes/@itwin/appui-react/issue-1170_2025-01-15-09-45.json

diff --git a/common/changes/@itwin/appui-react/issue-1170_2025-01-15-09-45.json b/common/changes/@itwin/appui-react/issue-1170_2025-01-15-09-45.json
new file mode 100644
index 00000000000..294be2cd8e3
--- /dev/null
+++ b/common/changes/@itwin/appui-react/issue-1170_2025-01-15-09-45.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/appui-react",
+      "comment": "Fix `useWidget` hook issue when used in a popout widget.",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/appui-react"
+}
\ No newline at end of file
diff --git a/e2e-tests/tests/popout-widget.test.ts b/e2e-tests/tests/popout-widget.test.ts
index 3d7ddea4405..446627b3e09 100644
--- a/e2e-tests/tests/popout-widget.test.ts
+++ b/e2e-tests/tests/popout-widget.test.ts
@@ -68,7 +68,6 @@ test.describe("popout widget", () => {
   });
 
   test("should dock a popout widget (after frontstage change)", async ({
-    context,
     page,
   }) => {
     const tab = tabLocator(page, "WT-2");
@@ -243,3 +242,25 @@ test("should render after link styles are loaded", async ({
     })
   );
 });
+
+test("useWidget hook", async ({ page }) => {
+  await page.goto("./blank?frontstageId=widget-api");
+
+  // TODO: make sure the widget is not overlaid. Need to split into smaller test frontstages.
+  await setWidgetState(
+    page,
+    "appui-test-providers:UseWidgetHookWidget",
+    WidgetState.Floating
+  );
+
+  const tab = tabLocator(page, "Use Widget Hook");
+  const widget = floatingWidgetLocator({
+    tab,
+  });
+
+  const popoutPage = await popoutWidget(widget);
+  const widgetText = popoutPage.getByText(
+    `{"state":0,"widgetLocation":"popout"}`
+  );
+  await expect(widgetText).toBeVisible();
+});
diff --git a/ui/appui-react/src/appui-react/frontstage/FrontstageDef.tsx b/ui/appui-react/src/appui-react/frontstage/FrontstageDef.tsx
index 555a7b91b00..1c3b7ec1452 100644
--- a/ui/appui-react/src/appui-react/frontstage/FrontstageDef.tsx
+++ b/ui/appui-react/src/appui-react/frontstage/FrontstageDef.tsx
@@ -753,6 +753,7 @@ export class FrontstageDef {
       content: popoutContent,
       location: position,
       useDefaultPopoutUrl: UiFramework.useDefaultPopoutUrl,
+      tabId,
     });
 
     // Use outer size if available to avoid inner size + browser zoom issues: https://github.com/iTwin/appui/issues/563