Question about Ant Design Overlay

I am running into errors when working with ant design overlays, but am unable to pinpoint what the issue is, so I cannot reproduce the error in a demo repo.

The error I get is “Failed to add overlay to the container”, which is in line 333 of your overlay code file. if (_position is null && _recurenceGuard <= 10) //up to 10 attempts { Console.WriteLine($"Failed to add overlay to the container. Container: {Trigger.PopupContainerSelector}, trigger: {Trigger.Ref.Id}, overlay: {Ref.Id}. Awaiting and rerunning."); await Task.Delay(10); await AddOverlayToBody(overlayLeft, overlayTop); }

I’d like to understand why you decided to check up to 10 attempts for the position of an overlay and what can potentially trigger this error.

[jessielam415]

Hi, I have a workaround for the issue. Not sure if this is helpful for diagnosing what caused the issue.

For Ant design dropdown, the issue disappears when I create an empty trigger and instead use the Visible property to control whether the dropdown is visible.

Overlay Error code:

<Dropdown Trigger="@(new Trigger[] { Trigger.Click })" Placement=Placement.BottomCenter>
    <Overlay>
        <Menu SelectedKeys=@null>
            <MenuItem>
                <CustomMenuComponent1/>
            </MenuItem>
            <MenuItem>
                <CustomMenuComponent2/>
            </MenuItem>
            <MenuItem>
                <CustomMenuComponent3/>
            </MenuItem>
            <MenuItem>
                <CustomMenuComponent4/>
            </MenuItem>
        </Menu>
    </Overlay>

    <ChildContent>

        <Button> Username </Button>

    </ChildContent>
</Dropdown>

Fixed code that doesn’t cause error:

<Dropdown Trigger="@(new Trigger[] { })" Placement=Placement.BottomCenter OnClick="() => _dropdownVisible = !_dropdownVisible" Visible="_dropdownVisible">
    <Overlay>
        <Menu SelectedKeys=@null>
            <MenuItem>
                <CustomMenuComponent1/>
            </MenuItem>
            <MenuItem>
                <CustomMenuComponent2/>
            </MenuItem>
            <MenuItem>
                <CustomMenuComponent3/>
            </MenuItem>
            <MenuItem>
                <CustomMenuComponent4/>
            </MenuItem>
        </Menu>
    </Overlay>

    <ChildContent>

        <Button> Username </Button>

    </ChildContent>
</Dropdown>
@code {
    private bool _dropdownVisible = false;
}

[anranruye]

I mean you can download the whole project source code and build the project locally.