Fix FrameworkUiAdmin.showCard

iTwin · Apr 23, 2024 · fe341bd · fe341bd
1 parent b1d87ce
commit fe341bd
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 16 deletions.
diff --git a/ui/appui-react/src/appui-react/UiFramework.ts b/ui/appui-react/src/appui-react/UiFramework.ts
@@ -958,20 +958,16 @@ export class UiFramework {
   ): boolean {
     const anchor = this.resolveHtmlElement(anchorElement);
 
-    return PopupManager.displayCard(
-      // FIXME: displayCard should take a wrapped { reactNode } type
-      { reactNode: content } as any as React.ReactNode,
-      {
-        title,
-        toolbarProps,
-        location,
-        offset,
-        onItemExecuted,
-        onCancel,
-        placement,
-        anchor,
-      }
-    );
+    return PopupManager.displayCard(content, {
+      title,
+      toolbarProps,
+      location,
+      offset,
+      onItemExecuted,
+      onCancel,
+      placement,
+      anchor,
+    });
   }
 
   /**

diff --git a/ui/appui-react/src/appui-react/uiadmin/FrameworkUiAdmin.tsx b/ui/appui-react/src/appui-react/uiadmin/FrameworkUiAdmin.tsx
@@ -6,7 +6,7 @@
  * @module Admin
  */
 
-import type * as React from "react";
+import * as React from "react";
 import type { XAndY } from "@itwin/core-geometry";
 import { IModelApp } from "@itwin/core-frontend";
 import type {
@@ -417,7 +417,7 @@ export class FrameworkUiAdmin extends UiAdmin {
   ): boolean {
     const placement = mapToPlacement(relativePosition);
     return UiFramework.showCard(
-      content,
+      <CardRenderer content={content} />,
       title,
       toolbarProps
         ? AbstractToolbarPropsToToolbarProps(toolbarProps)
@@ -556,3 +556,21 @@ function CommonToolbarItemToToolBarItem(item: CommonToolbarItem): ToolbarItem {
     badge: item.badgeType,
   };
 }
+
+interface CardRendererProps {
+  content: HTMLElement;
+}
+
+function CardRenderer({ content }: CardRendererProps) {
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    const el = ref.current;
+    el?.appendChild(content);
+    return () => {
+      el?.removeChild(content);
+    };
+  }, [content]);
+
+  return <div ref={ref} />;
+}