search

microsoft / fluentui-blazor

Microsoft Fluent UI Blazor components library. For use with ASP.NET Core Blazor applications
https://www.fluentui-blazor.net
MIT License
3.23k stars 294 forks source link

fix: Content not visible in `FluentPopover` #1996

Closed hksalessio closed 2 weeks ago

hksalessio commented 2 weeks ago

🐛 Bug Report

When a FluentPopover is nested in another component, the popover's content is not visible. It appears that the FluentAnchoredRegion used inside the popover does not receive the elements to display in the shadow dom: image

💻 Repro or Code Sample

Example page and component to reproduce this issue:

Test.razor:

@using Microsoft.FluentUI.AspNetCore.Components

@page "/test"

@using Microsoft.FluentUI.AspNetCore.Components

@page "/test"

<FluentButton Id="button_id" OnClick="() => _popoverOpen = !_popoverOpen">
    Toggle Popover
</FluentButton>

<NestedPopover Id="button_id" @bind-Open="_popoverOpen">
    Test text.
</NestedPopover>

@code {
    private bool _popoverOpen = false;
    }

NestedPopover.razor:

@using Microsoft.FluentUI.AspNetCore.Components

<FluentPopover AnchorId="@Id" @bind-Open="Open" AutoFocus="true">
    <Body>
        @ChildContent
    </Body>
</FluentPopover>

@code {
    /// <summary>
    /// Gets or sets popover opened state.
    /// </summary>
    [Parameter] public bool Open { get; set; }

    [Parameter] public string? Id { get; set; }
    /// <summary>
    /// Callback for when open state changes.
    /// </summary>
    [Parameter] public EventCallback<bool> OpenChanged { get; set; }

    /// <summary>
    /// Gets or sets the content to be rendered inside the component.
    /// </summary>
    [Parameter] public RenderFragment? ChildContent { get; set; }
}

🌍 Your Environment

vnbaaij commented 2 weeks ago

You have not 'connected' the Popover to the button. You need to use the AnchorId parameter on the FluentPopover for that.

I've editted the code in your issue above. You'll get this then: image

hksalessio commented 2 weeks ago

Ahh okay, thank you! Maybe you should update the documentation to include this information? In retrospect it seems pretty obvious but I thought I was going crazy :D