Dropdown gets closed while using mouse event args

Question

Hi Everyone,

This works fine when i hover over the button it shows and closes when it comes out of the dropdown however the dropdown still closes while mouse pointer is still in the dropdown.

Could some share your ideas!!

My need is to display the dropdown while in the button and should be open while the mouse in the dropdown and only to close if the pointer is outside the button or dropdown.

PS: Thanks in advance

<button class="btn btn-secondary dropdown-toggle" type="button" id="transformDropdown" data-toggle="dropdown" aria-expanded="@dropdownVisible.ToString().ToLower()" style="color: #212529; background-color: #f8f9fa;" @onmouseover="ToggleDropdown" >
    Applied Actions
</button>

<ul class="dropdown-menu" @ref="dropdownRef" id="action-dropdown-list" aria-labelledby="transformDropdown" style=" background-color: #ffffff;display: @(dropdownVisible ? "block" : "none")" @onmouseover="ToggleDropdown" @onmouseout="CloseDropdown">

private void ToggleDropdown()
{
    dropdownVisible = true;
    isInButton = true;
}
private void ToggleDropdown1()
{
    dropdownVisible = true;
}
private void CloseDropdown()
{
    if (!isInButton)
    {
        dropdownVisible = false;
    }
}

Answer 1

Hi, I have tested with following code and works well.

@page "/"
<button class="btn btn-secondary dropdown-toggle" type="button" id="transformDropdown" data-toggle="dropdown" style="color: #212529; background-color: #f8f9fa;"
        aria-expanded="@dropdownVisible.ToString().ToLower()" @onmouseover="ToggleDropdown" @onmouseout="CloseDropdown">
    Applied Actions
</button>
<ul class="dropdown-menu"  id="action-dropdown-list" aria-labelledby="transformDropdown" 
style=" background-color: #ffffff;display: @(dropdownVisible ? "block" : "none")" @onmouseover="ToggleDropdown" @onmouseout="CloseDropdown">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
@code{
    private bool dropdownVisible=false;
    private void ToggleDropdown()
    {
        dropdownVisible = true;
    }
    private void ToggleDropdown1()
    {
        dropdownVisible = true;
    }
    private void CloseDropdown()
    {
        dropdownVisible = false;
    }
}