I am making a simple ASP.NET Blazor WASM project with a list of collapse panels as shown in this screenshot.
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.