[HxContextMenu] inside [HxAccordion] header does interfere with each other

[bholbrook]

I'm attempting to use an HxContextMenu inside the HeaderTemplate of an HxAccordionItem but when the menu item is clicked the collapse state of the HxAccordionItem is also toggled when it shouldn't be.

public class WordDto
{
    public string Name { get; set; } = string.Empty;
}

private List<WordDto> words = new() { new WordDto { Name = "test" } };

private void RemoveWordFromList(WordDto word)
{
    words .Remove(word);
}

<HxAccordion StayOpen="true">
    @foreach (var word in words)
    {
        <HxAccordionItem>
            <HeaderTemplate>
                <HxContextMenu>
                    <HxContextMenuItem Icon="BootstrapIcon.Trash" Text="Remove this word" OnClick="@(() => RemoveWordFromList(word))" OnClickStopPropagation="true" />
                </HxContextMenu>
                @word.Name
            </HeaderTemplate>
            <BodyTemplate>
                <HxInputText Label="Word" @bind-Value="@word.Name" />
            </BodyTemplate>
        </HxAccordionItem>
    }
</HxAccordion>

[hakenr]

@bholbrook Are you able to put dropdown-menu insider accordion-header in vanilla Bootstrap (HTML wo/ Blazor)? With such a demo we might be able to investigate further.

Our HxContextMenu uses the @onclick:stopPropagation, but it seems it is Bootstrap which passes the click event to both targets. It seems placing a dropdown inside accordion header is not supported by Bootstrap.

[bholbrook]

@hakenr If this isn't something supported by Bootstrap I'm happy closing this issue. My use-case was a little funky and so it's unlikely even if this does get fixed it'll benefit many people. Shall we close this?

[hakenr]

@bholbrook TBH, this isn't a common scenario and without a deeper investigation, I can't definitively say whether this is supported by Bootstrap. That's why I asked for a vanilla Bootstrap demo (e.g., CodePen) where such a setup will be demonstrated. If it's possible with Bootstrap, we can take further actions to make it possible with Havit.Blazor.

(My initial tests reproduced the issue with our components, even though the @onclick:stopPropagation is in place.)