0

I am making a simple ASP.NET Blazor WASM project with a list of collapse panels as shown in this screenshot. enter image description here The collapse panels are blazor components with no javascript involved. Currently, when I click the buttons on top of the panels, it triggers a collapse change for the panels underneath. What change would I have to make to the collapse panel components so that they are not affected by clicks on parent elements such as buttons?

Index.razor

<Accordion @ref="_accordion" id="ac1" ActiveCollapsePanel="@_activePanel" OnCollapsePanelChanged="OnAccordionChanged" >
    <CollapsePanels>
        @foreach (var box in boxes)
        {
            <CollapsePanel style="margin-bottom: 10px;" CollapsedColor="@_accordionCollapsedColor" ExpandedColor="@_accordionExpandedColor" HoverColor="@_accordionHoverColor"  Animate="@_isAnimated" ShowContentOverflow="true"  ContentHeight="0">
                <CollapsedHeaderContent>
                    <div class="w-100">
                        <h5>@box.Hostname | @box.Ip</h5>
                        <button class="btn btn-success">Click me</button>
                         ...
                    </div>
                </CollapsedHeaderContent>
                <ExpandedHeaderContent>
                    <div class="w-100">
                        <h5>@box.Hostname | @box.Ip </h5>
                        <button class="btn btn-success">Click me</button>
                        ...
                    </div>
                </ExpandedHeaderContent>
                ...

CollapsePanel.razor

<div @ref="_inputRef" class="collapsePanel" tabindex="200" disabled="@Disabled" @attributes=AllOtherAttributes>
    @if (Collapsed)
    {
        <div id="@($"collapse_{_componentId}")" class="collapseHeader collapsed @(Animate ? "animate" : "")" @onclick="ExpandCollapse">
            @(CommonHeader ?? CollapsedHeaderContent)
        </div>
    }
    else
    {
        <div id="@($"collapse_{_componentId}")" class="collapseHeader expanded @(Animate ? "animate" : "")" @onclick="ExpandCollapse">
            @(CommonHeader ?? ExpandedHeaderContent)
        </div>
    }
    <div class="collapseContent @(Animate ? "animate" : "")"
         style="opacity: @(Collapsed ? "0" : "1"); max-height: @GetContentHeight(); overflow: @(ShowContentOverflow ? "auto" : "hidden");">
        @Content
    </div>
</div>

The code for the collapse panels are taken from this github.

Nate
  • 53
  • 3
  • 1
    Does this answer your question? [How to stop event propagation in Blazor Server app](https://stackoverflow.com/questions/61579284/how-to-stop-event-propagation-in-blazor-server-app) – GSerg Nov 14 '21 at 22:40
  • It works @GSerg! thank you for the quick response – Nate Nov 14 '21 at 22:46

0 Answers0