@inject IJsInterop JsInterop

<div class="dropdown @DropDownClass" @onmouseout="MouseLeft" @onmouseover="MouseEnter">
    <button class="btn dropdown-toggle @ButtonClass @_showClass"
            type="button"
            data-bs-toggle="dropdown"
            aria-expanded="@_isExpanded"
            @onclick="ToggleShown">
        @ButtonContent
    </button>
    <ul class="dropdown-menu @DropDownMenuClass @_showClass" @onclick="ToggleShown" >
        @ChildListItems
    </ul>
</div>

@code {
    private System.Timers.Timer _collapseTimer;
    private string _showClass;
    private bool _isExpanded;

    [Parameter]
    public string ButtonClass { get; set; }

    [Parameter]
    public RenderFragment ButtonContent { get; set; }

    [Parameter]
    public string DropDownClass { get; set; }

    [Parameter]
    public string DropDownMenuClass { get; set; }


    [Parameter]
    public RenderFragment ChildListItems { get; set; }

    private void ToggleShown()
    {
        _isExpanded = !_isExpanded;
        _showClass = _isExpanded ? "show" : "";
    }

    private void MouseEnter()
    {
        _collapseTimer?.Dispose();
    }

    private void MouseLeft()
    {
        _collapseTimer?.Dispose();
        _collapseTimer = new System.Timers.Timer(1500);
        _collapseTimer.Elapsed += (sender, args) =>
        {
            _isExpanded = false;
            _showClass = "";
            InvokeAsync(StateHasChanged);
        };
        _collapseTimer.Start();
    }

}