Blazor: Add button to Bootstrap accordion in header

Question

I have an accordion in bootstrap, each item looks like this:

<div class="accordion-item">
    <h2 class="accordion-header" id="@Move.IDText">
        <button class="accordion-button collapsed" type="button"
                data-bs-toggle="collapse" data-bs-target="#[email protected]"
                aria-expanded="false" aria-controls="[email protected]">
            <div class="header">
                @Move.Tittle
                
                    <div class="d-flex gap-1 me-2" 
                         @onclick:preventDefault="true" 
                         @onclick:stopPropagation="true">
                        <div class="Icon Fi" 
                            @onclick:preventDefault="true" 
                            @onclick:stopPropagation="true" 
                            @onclick=@(async()=>{ await RequestRoll(DinoStates.D_Fit);})>
                        </div>
                    </div>          
            </div>
        </button>
    </h2>
    <div id="[email protected]" 
        class="accordion-collapse collapse @(StartsOpen?"show" : "")"
            aria-labelledby="@Move.IDText"
            data-bs-parent="#@PackID">
        <div class="accordion-body d-flex flex-column gap-3 moveCore">
          //my content
        </div>
    </div>
</div>

This ends up in an accordion that looks like this:

I want users to be able to click the color button (F, I, C) whether opened or closed. And so some action, instead of toggling the accordion item. But neither the prevent-default nor the stop-propagation tags seem to work.

Is that an intended behavior for accordion headers? Is there a way around it?

Answer 1

You question looks very similar to this one (Fiddle example included): https://stackoverflow.com/a/67343625

He says: "Nesting elements inside the .accordion-button won't allow to capture the inner elements events. A way to achieve this functionality is to separate the inner buttons alongside the .accordion-button and then with absolute positioning achieve a visually similar appearance".