Blazor站点中Radzen组件及Bootstrap弹窗显示在页面顶部的原因及解决方法

我遇到RadzenColorPicker、RadzenDatePicker以及Bootstrap 5 Popover的弹窗都固定显示在页面顶部的问题。为排除其他CSS或JavaScript文件的干扰，我搭建了极简测试环境，相关代码如下：

测试布局代码（DialogLayout.razor） #

@inherits LayoutComponentBase
@implements IDisposable

<div class="container-fluid">
    @if (!string.IsNullOrEmpty(direction))
    {
        <HeadContent>
            <link href=@($"css/radzen/default-{direction}-4.9.1.css") rel="stylesheet" />
        </HeadContent>

        <RadzenDialog />
        <RadzenNotification />
        <RadzenTooltip />
        <RadzenContextMenu />

        <div dir="@direction">@Body</div>
    }
</div>


@code {

    protected override async Task OnParametersSetAsync()
    {
        await base.OnParametersSetAsync();
    }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
    }


    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);

        if (firstRender)
        {
            string language = await jsInterop.GetProperty("Language");
            if (string.IsNullOrEmpty(language))
            {
                await jsInterop.SetProperty("Language", "en");
                cultureChanger.ChangeCulture("en");
            }
            else
            {
                cultureChanger.ChangeCulture(language);
            }

            GetLanguageValues();
        }
    }

    public async void Dispose()
    {
    }


    string direction = "";
    private async Task GetLanguageValues()
    {
        viewData.Language = textService.GetText(cultureChanger.Current, "lang");
        direction = textService.GetText(cultureChanger.Current, "Direction");
        StateHasChanged();
   }
}

_Host.cshtml内容 #

该文件未引入任何额外CSS链接，仅包含以下JavaScript脚本：

<script src="_framework/blazor.server.js"></script>
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
<script src="scripts/interop.js"></script>

注：interop.js仅包含从对话框布局调用的自定义JavaScript代码，无弹窗相关逻辑

测试页面（Test.cshtml） #

@page "/test"
@layout DialogLayout

<h3>Test</h3>

<br /><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<RadzenColorPicker @bind-Value="color">

</RadzenColorPicker>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

@code {
    string color = null;
}

在这个纯净的测试环境中，RadzenColorPicker的弹窗依然显示在页面顶部。请问问题成因是什么，该如何解决？

内容的提问来源于stack exchange，提问作者mz1378