Context
I am migrating some of my application components from InteractiveServer to InteractiveWebAssembly. In InteractiveServer, the portal host used to work and dialogs & popups were displayed. But after moving to WebAssembly, there seems to be an issue with the portal host.
I believe this is related with #376 (comment)
Reproduction
App.razor:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<base href="/"/>
<link rel="stylesheet" href="@Assets["theme.css"]"/>
<link rel="stylesheet" href="_content/BlazorBlueprint.Components/blazorblueprint.css" />
<link rel="stylesheet" href="@Assets["base.css"]"/>
<link rel="stylesheet" href="@Assets["RemovedForPrivacy.styles.css"]"/>
<link rel="icon" type="image/x-icon" href="/img/favicon.ico">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@@tabler/icons-webfont@3.35.0/dist/tabler-icons.min.css" />
<link rel="stylesheet" href="_content/Kebechet.Blazor.Tabler.Icons/tabler-icons-filled.min.css" />
<ImportMap />
<HeadOutlet />
<SectionOutlet SectionName="head" />
<!-- removed for privacy -->
</head>
<body>
<Routes />
<script src="_framework/blazor.web.js"></script>
<!-- removed for privacy -->
</body>
</html>Routes.razor:
<ErrorBoundary>
<ChildContent>
<Router AppAssembly="typeof(Program).Assembly"
AdditionalAssemblies="[typeof(RemovedForPrivacy.Client.AssemblyMarker).Assembly]"
NotFoundPage="typeof(PageNotFound)">
<Found Context="routeData">
<AuthorizeRouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)">
<NotAuthorized>
<RedirectToLogin/>
</NotAuthorized>
</AuthorizeRouteView>
<FocusOnNavigate RouteData="routeData" Selector="h1"/>
</Found>
</Router>
</ChildContent>
<ErrorContent>
Removed for Privacy
</ErrorContent>
</ErrorBoundary>MainLayout:
@inherits LayoutComponentBase
@using BlazorBlueprint.Primitives.Services
<main class="min-h-full">
<Navbar />
<section class="pt-28">
@Body
</section>
</main>
<BbPortalHost />
<BbToastProvider />
<BbDialogProvider />
<Footer></Footer>
<div id="blazor-error-ui" data-nosnippet>
An unhandled error has occurred.
<a href="." class="reload">Reload</a>
<span class="dismiss">🗙</span>
</div>Expected behavior
BbPortalHost is rendering any tooltips or dialogs, that are opened or triggered by interactive WebAssembly components.
Actual behavior
A warning is logged in the WebAssembly component in the browser console:
warn: BlazorBlueprint.Primitives.Services.PortalService[1]
BlazorBlueprint: No <PortalHost /> detected. Portal-based components (Dialog, Select, Popover, etc.) require a <BbPortalHost /> in your layout to render. Add <BbPortalHost /> to your MainLayout.razor.
warn: BlazorBlueprint.Primitives.Floating.BbFloatingPortal[2]
Portal 'tooltip-portal-tooltip-10-content' timed out waiting for PortalHost to render. Ensure <BbPortalHost /> is in your layout.
Workarounds
I attempted to copy your example for InteractiveWebAssembly in this repository. However, the example is very minimal and I applied the changes to my application. The issue persists. I'm not a huge expert in rendermodes in Blazor, but judging from the discussion thread, it seems that floating elements are not fully supported yet in WebAssembly?
Context
I am migrating some of my application components from
InteractiveServertoInteractiveWebAssembly. InInteractiveServer, the portal host used to work and dialogs & popups were displayed. But after moving to WebAssembly, there seems to be an issue with the portal host.I believe this is related with #376 (comment)
Reproduction
App.razor:
Routes.razor:
MainLayout:
Expected behavior
BbPortalHostis rendering any tooltips or dialogs, that are opened or triggered by interactive WebAssembly components.Actual behavior
A warning is logged in the WebAssembly component in the browser console:
Workarounds
I attempted to copy your example for
InteractiveWebAssemblyin this repository. However, the example is very minimal and I applied the changes to my application. The issue persists. I'm not a huge expert in rendermodes in Blazor, but judging from the discussion thread, it seems that floating elements are not fully supported yet in WebAssembly?