AntBlazor - Dropdown

[xtcsuk]

hello
AntBlazor dropdown, when rendered does not include all the markup.

I have this wrapper around AntBlazor dropdown:

@using AntDesign;
@using BlazorApp2.Models;

@if (Data == null)
{
    return;
}

<Dropdown Trigger="@(new Trigger[] { Trigger.Click })" >
    <Overlay>
        <Menu OnMenuItemClicked="OnItemClicked">
            @foreach (var item in Data)
            {
                if (item.Divider)
                {
                    <MenuDivider />
                }
                else
                {
                    <MenuItem Disabled="@item.Disabled" Id="@item.Id">@item.Description</MenuItem>
                }                
            }
        </Menu>
    </Overlay>
    <ChildContent>
        <Button Class="greenOutlinedButton" Type="@ButtonType.Primary">
            @ButtonCaption 
            <Icon Class="ant-dropdown-link" Type="down" />
        </Button>
    </ChildContent>
</Dropdown>

@code {
    [Parameter]
    public IEnumerable<DropDownModel>? Data { get; set; }

    [Parameter]
    public string ButtonCaption { get; set; } = "No Caption";

    [Parameter]
    public EventCallback<DropDownModel> OnItemClick { get; set; }

    private void OnItemClicked(MenuItem value)
    {
        // code to invoke
    }
}

And using it as:

@page "/dropdowntest"
@using AntDesign
@using BlazorApp2.Models;

<p>Dropdown</p>
<DropDownComponent Data="@_dropDownNames" OnItemClick="TestDropdown"></DropDownComponent>

@code {
    private IEnumerable<DropDownModel> _dropDownNames = new List<DropDownModel>
    {
        new DropDownModel
        {
            Id = "D-Test Id",
            Description = "D-Test Desc",
        },
        new DropDownModel
        {
            Id = "D-Test Id",
            Description = "D-Test Desc"
        },
        new DropDownModel
        {
            Divider = true
        },
        new DropDownModel
        {
            Id = "Id",
            Description = "After divider"
        }        
    };

    private async Task TestDropdown(DropDownModel value)
    {
        var time = new TimeSpan(0, 0, 5);
        await Task.Delay(time);
        var newValue = value.Id;
    }
}

When unit testing this component "dropdowntest", using AntDesign.TestKit nuget package:

    public class UnitTest1
    {
        [Fact]
        public void Test1()
        {
            var ctx = new AntDesignTestBase();

            ctx.JSInterop.Setup<DomRect>("AntDesign.interop.domInfoHelper.getBoundingClientRect", _ => true);
            ctx.JSInterop.SetupVoid("AntDesign.interop.styleHelper.addClsToFirstChild", _ => true);

            var cut = ctx.RenderComponent<DropDownTest>();
        }
    }
}

It only renders:

<p>Dropdown</p>
        <div class="" style="display: inline-block; width: fit-content; " id="ant-blazor-2baa1a90-6e66-46e4-b7c8-1e46301a8fd6" blazor:onclick="1" blazor:onmouseenter="2" blazor:onmouseleave="3" blazor:oncontextmenu="4" blazor:oncontextmenu:preventDefault blazor:elementReference="fa895d8a-19e7-4f4f-bb92-d989d3e0cb71">
            
    <button class="greenOutlinedButton ant-btn ant-btn-primary" id="ant-blazor-e1ff6ca0-a0d3-4bbf-8058-c5817c4ebbfb" type="button" blazor:onclick="5" blazor:onmouseup="6" ant-click-animating-without-extra-node="false" blazor:elementReference="21f9cb96-8960-432a-8547-bc4000bdf899">
                <span>No Caption 
            <span role="img" class="ant-dropdown-link anticon anticon-down" id="ant-blazor-b57a63a4-64d6-412a-bc00-211c82485684" blazor:elementReference="2ccb8ad8-be41-472a-9d59-9973aefcf194">
<svg focusable="false" width="1em" height="1em" fill="currentColor" style="pointer-events: none;"  xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"/></svg></span></span>
    </button>

        </div>

It only renders the ChildContent of the dropdown component and not the overlay, looking at the AntBlazor dropdown source code, it looks like the Overlay component is rendered under meeting certain conditions, in this case when the button is clicked.

How do I achieve this, capturing the whole markup, not just part of it?

[linkdotnet]

Hey @xtcsuk,

I don't have much knowledge about AntBlazor so it would be better to address the issue itself with the team.
I quickly checked the Overlay component and there are various scenarios where it doesn't get rendered in the first place.