Megabit / Blazorise

Blazorise is a component library built on top of Blazor with support for CSS frameworks like Bootstrap, Tailwind, Bulma, AntDesign, and Material.
https://blazorise.com/
Other
3.29k stars 533 forks source link

Prevent clicking dropdown item from closing the menu #5487

Open InzeNL opened 6 months ago

InzeNL commented 6 months ago

Is your feature request related to a problem? Please describe. In my dropdown, I want to add two " buttons". One that enables all checkboxes in the dropdown, and one that disables all of them. I have working code behind this, and it toggles the checkboxes. However, when these dropdown items are clicked, the dropdown menu is closed.

Currently, this is an implementation for a dropdown menu with items with and without checkboxes. When the item with the checkbox is clicked (anywhere), the dropdown menu stays open. When the dropdown item without the checkbox is clicked, the dropdown menu closes.

<Dropdown>
    <DropdownToggle>
        Dropdown Toggle
    </DropdownToggle>
    <DropdownMenu>
        <DropdownItem ShowCheckbox="true">Dropdown Item With Checkbox</DropdownItem>
        <DropdownItem>Dropdown Item Without Checkbox</DropdownItem>
    </DropdownMenu>
</Dropdown>

Describe the solution you'd like I would like to see a parameter I could add to the dropdown item that disables "close on click"

With the code above, the updated could look like this.

<Dropdown>
    <DropdownToggle>
        Dropdown Toggle
    </DropdownToggle>
    <DropdownMenu>
        <DropdownItem ShowCheckbox="true">Dropdown Item With Checkbox</DropdownItem>
        @* Added a parameter here *@
        <DropdownItem CloseOnClick="false">Dropdown Item Without Checkbox</DropdownItem>
    </DropdownMenu>
</Dropdown>

Perhaps, this same parameter can also be used to enable "close on click" for dropdown items with checkboxes. I don't know the use case for this, but it might end up being useful

Current workaround: I have currently added this workaround, that simply reopens the dropdown when the dropdown item is clicked.

<Dropdown @ref="dropdown">
    <DropdownToggle>
        Dropdown Toggle
    </DropdownToggle>
    <DropdownMenu>
        <DropdownItem ShowCheckbox="true">Dropdown Item With Checkbox</DropdownItem>
        <DropdownItem Clicked="async () => await dropdown.Show().ConfigureAwait(false)">Dropdown Item Without Checkbox</DropdownItem>
    </DropdownMenu>
</Dropdown>

@code{
    private Dropdown? dropdown;
}

Additional context

The workaround does seem to work fine, even if it isn't the most elegant option. Therefore, this feature request doesn't have a high priority

stsrki commented 6 months ago

I'm not sure if making the menu open after it is clicked makes sense. From a UX perspective.


We will investigate and make a decision. In theory, it should be an easy addition.