blazorblazorise

Blazorise Dropdown does not disappear


I'm new to Blazorise and I'm using Blazorise Dropdown, then I have faced some conflict, when I click the dropdown and then click outside, the dropdown menu does not disappear, any solution?

Thanks

<Dropdown @ref="dropdown" Display="Display.InlineBlock">
  <Button Clicked="@ShowMenu" Color="Color.Secondary">Show Menu</Button>
    <DropdownMenu>
        <DropdownItem>Action</DropdownItem>
        <DropdownDivider />
        <DropdownItem>Another Action</DropdownItem>
    </DropdownMenu>
</Dropdown>


@code {
    Dropdown dropdown;

    Task ShowMenu()
    {
        return dropdown.Show();
    }
}

Solution

  • Instead Button you have to use DropdownToggle component:

    <Dropdown @ref="dropdown" Display="Display.InlineBlock">
        <DropdownToggle Clicked="@ShowMenu" Color="Color.Secondary">Show Menu</DropdownToggle>
        <DropdownMenu>
            <DropdownItem>Action</DropdownItem>
            <DropdownDivider />
            <DropdownItem>Another Action</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    
    
    @code {
        Dropdown dropdown;
    
        Task ShowMenu()
        {
            return dropdown.Show();
        }
    }
    

    https://blazorise.com/docs/components/dropdown