Skip to content

Prevent clicking dropdown item from closing the menu #5487

@InzeNL

Description

@InzeNL

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: InvestigateNeeds to investigate more to what can be done.Type: Feature ⚙Request or idea for a new feature.

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions