Dropdown component toggle methods (ToggleAsync etc.) not working as expected

[MarcinWatroba]

Description
Dropdown component toggle methods such as ToggleAsync and ShowAsync always display dropdown menu of the first dropdown component in the page. This occurs in global server side rendering (haven't tested other types of rendering).

Example: You have Dropdown A and Dropdown B, with their respective menus, Menu A and Menu B.
When calling ToggleAsync method on either Dropdown A or Dropdown B, Dropdown A menu appears. Dropdown B menu never appears.

To Reproduce
Use sample code provided

Expected behavior
Menu A should appear when toggling Dropdown A, Menu B should appear when toggling Dropdown B

Screenshots

Versions:

• .NET Version: .NET8
• BlazorBootstrap: 3.3.1
• Blazor WebAssembly / Server: Server
• Blazor Interactive Render Mode: Server
• Blazor Interactivity Location: global

Sample code
I replaced DropdownToggleButton with button in this example but it does not matter where the toggle method is called.
I tried assigning custom unique ids and names to each component too and nothing helped.

Same issue persists when first custom toggle button is swapped for DropdownToggleButton
When instead the second custom toggle button is swapped for DropdownToggleButton the issue no longer occurs.

Tried uploading code block but markdown completely messed it up, so here's screenshot:

GitHub repo
Can create one if needed

Desktop (please complete the following information):

• OS: Windows 11, macOS 15
• Browser: Chrome, Safari
• Version Chrome 132, Safari 18.3

[gvreddy04]

@MarcinWatroba Thank you for using BlazorBootstrap.

There is no need to write the ToggleAsync on buttons. Instead, use DropdownToggleButton or a combination of DropdownToggleButton and DropdownToggleButton.

Please follow the demos at BlazorBootstrap Dropdown Demos.

Example 1:

<div class="d-flex gap-2 mb-4">
    <Dropdown Color="DropdownColor.Primary">
        <DropdownToggleButton>Primary</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>

    <Dropdown Color="DropdownColor.Secondary">
        <DropdownToggleButton>Secondary</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>

    <Dropdown Color="DropdownColor.Success">
        <DropdownToggleButton>Success</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>

    <Dropdown Color="DropdownColor.Info">
        <DropdownToggleButton>Info</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>

    <Dropdown Color="DropdownColor.Warning">
        <DropdownToggleButton>Warning</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>

    <Dropdown Color="DropdownColor.Danger">
        <DropdownToggleButton>Danger</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
</div>

Example 2: Split button

<div class="d-flex gap-2 mb-4">
    <Dropdown Color="DropdownColor.Primary" Split="true">
        <DropdownActionButton>Primary</DropdownActionButton>
        <DropdownToggleButton />
        <DropdownMenu>
            <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>

    <Dropdown Color="DropdownColor.Secondary" Split="true">
        <DropdownActionButton>Secondary</DropdownActionButton>
        <DropdownToggleButton />
        <DropdownMenu>
            <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>

    <Dropdown Color="DropdownColor.Success" Split="true">
        <DropdownActionButton>Success</DropdownActionButton>
        <DropdownToggleButton />
        <DropdownMenu>
            <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>

    <Dropdown Color="DropdownColor.Info" Split="true">
        <DropdownActionButton>Info</DropdownActionButton>
        <DropdownToggleButton />
        <DropdownMenu>
            <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>

    <Dropdown Color="DropdownColor.Warning" Split="true">
        <DropdownActionButton>Warning</DropdownActionButton>
        <DropdownToggleButton />
        <DropdownMenu>
            <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>

    <Dropdown Color="DropdownColor.Danger" Split="true">
        <DropdownActionButton>Danger</DropdownActionButton>
        <DropdownToggleButton />
        <DropdownMenu>
            <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
</div>

I hope the demos will help. Let me know if you are still facing any issues.

[MarcinWatroba]

@gvreddy04 Thanks for speedy reply, however, this doesn't solve the problem.

Let's take the dropdown form demo you have on your website as an example. When you copy the code and run it for yourself there's an issue right out of the box. The form has validation, however user doesn't get to see validation messages because as soon as the submit button is clicked, or user clicks anywhere in the dropdown menu for that matter, the dropdown closes.

To fix this I add the AutoCloseBehavior=Outside parameter, now dropdown doesn't close down when user clicks the submit button.

Next step is to close the dropdown on submit only if validation passes and form is submitted successfully. For this to work you need to use the manual dropdown hide method. So you add the Dropdown variable, reference it, and call HideAsync() method in HandleOnValidSubmit().

This works great if you have just one dropdown, try adding another dropdown before this form dropdown, the HideAsync will no longer work because it will trigger on the first dropdown instead on the one that's referenced.

[MarcinWatroba]

Here's example, your edit form sample code combined with the extra bits I added, try expanding Dropdown A, then expand Dropdown form and click on the Submit button, Dropdown A will close instead of Dropdown form:

@page "/"

@using System.ComponentModel.DataAnnotations
@rendermode InteractiveServer

<style>
    .valid.modified:not([type=checkbox]) {
        outline: 1px solid #26b050;
    }

    .invalid {
        outline: 1px solid red;
    }

    .validation-message {
        color: red;
    }
</style>

<Dropdown AutoClose="false">
    <DropdownToggleButton>Dropdown A</DropdownToggleButton>
    <DropdownMenu >
        <DropdownItem Class="hoverHighlight" Type="DropdownItemType.Button">A1</DropdownItem>
    </DropdownMenu>
</Dropdown>

<Dropdown  @ref="_dropdown1" Color="DropdownColor.Secondary" AutoCloseBehavior="DropdownAutoCloseBehavior.Outside">
    <DropdownToggleButton>Dropdown form</DropdownToggleButton>
    <DropdownMenu Class="px-4 py-3" Style="width:480px;">
        <EditForm EditContext="@editContext" OnValidSubmit="HandleOnValidSubmit">
            <DataAnnotationsValidator />

            <div class="mb-3">
                <label class="form-label">Item Price: <span class="text-danger">*</span></label>
                <NumberInput TValue="decimal?" Value="invoice.Price" ValueExpression="() => invoice.Price" ValueChanged="(value) => PriceChanged(value)" Placeholder="Enter price" />
                <ValidationMessage For="@(() => invoice.Price)" />
            </div>

            <div class="mb-3">
                <label class="form-label">Item Discount:</label>
                <NumberInput TValue="decimal?" Value="invoice.Discount" ValueExpression="() => invoice.Discount" ValueChanged="(value) => DiscountChanged(value)" Placeholder="Enter discount" />
                <ValidationMessage For="@(() => invoice.Discount)" />
            </div>

            <div class="mb-3">
                <label class="form-label">Total Amount: <span class="text-danger">*</span></label>
                <NumberInput TValue="decimal?" @bind-Value="invoice.Total" Disabled="true" Placeholder="Enter total" />
                <ValidationMessage For="@(() => invoice.Total)" />
            </div>

            <div class="row">
                <div class="col-md-12 text-right">
                    <Button Type="ButtonType.Button" Color="ButtonColor.Secondary" Class="float-end" @onclick="ResetForm">Reset</Button>
                    <Button Type="ButtonType.Submit" Color="ButtonColor.Success" Class="float-end me-2">Submit</Button>
                </div>
            </div>
        </EditForm>
    </DropdownMenu>
</Dropdown>

@code {
    private Invoice invoice = new();
    private EditContext editContext = default!;
    private Dropdown _dropdown1 = default;

    protected override void OnInitialized()
    {
        editContext = new EditContext(invoice);
        base.OnInitialized();
    }

    protected override void OnParametersSet()
    {
        CalculateToatl();
        base.OnParametersSet();
    }

    private void PriceChanged(decimal? value)
    {
        invoice.Price = value;
        CalculateToatl();
    }

    private void DiscountChanged(decimal? value)
    {
        invoice.Discount = value;
        CalculateToatl();
    }

    private void CalculateToatl()
    {
        var price = invoice.Price.HasValue ? invoice.Price.Value : 0;
        var discount = invoice.Discount.HasValue ? invoice.Discount.Value : 0;
        invoice.Total = price - discount;
    }

    public async Task HandleOnValidSubmit()
    {
        Console.WriteLine($"Price: {invoice.Price}");
        Console.WriteLine($"Discount: {invoice.Discount}");
        Console.WriteLine($"Total: {invoice.Total}");
        await _dropdown1.HideAsync();
    }

    private void ResetForm()
    {
        invoice = new();
        editContext = new EditContext(invoice);
    }

    public class Invoice
    {
        [Required(ErrorMessage = "Price required.")]
        [Range(60, 500, ErrorMessage = "Price should be between 60 and 500.")]
        public decimal? Price { get; set; } = 232M;

        [Range(0, 50, ErrorMessage = "Discount should be between 0 and 50.")]
        public decimal? Discount { get; set; }

        [Required(ErrorMessage = "Amount required.")]
        [Range(10, 500, ErrorMessage = "Total should be between 60 and 500.")]
        public decimal? Total { get; set; }
    }
}

[gvreddy04]

@MarcinWatroba Thank you for the detailed information. I will take a look.

[SebastianRoether]

I think there is a bug regarding the hierarchy in the DOM that prevents code invokations to work. Instead of finding the child menu of the dropdown component, (blazor) bootstrap is looking for siblings, doesn't find any and takes the first menu it finds on the parent - which happens to be another dropdown menu. In a similar case, I could work around this with something like

await Js.InvokeVoidAsync("window.blazorBootstrap.dropdown.hide", #buttonid);

where buttonid was the id of a dropdown toggle button

[PascalDeclercq1964]

I think I have the same problem.
I have 2 dropdowns. One of both doesn't have a togglebutton, I toggle it programmatically.
If I try to toggle the buttonless one, the wrong one toggles (as it comes first in the dom as SebastianRoether mentioned here above).
If I give both a toggle button, toggling with both buttons works a expected, still not programatically. But this is not what I want.

[dolfuz]

Same issue here. It's sad that the only solution is to have a single dropdown per page, as having multiple dropdowns introduces the bug previously explained.

@gvreddy04 This is 100% not resolved.