stopPropagation not working in Bootstrap accordion

Question

I have the following accordion in my tsx:

<div id="accordion">
    <div className="card">
        <div className="card-header" id="headingOne">
            <h5 className="mb-0" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    Title
                <button onClick={this.onButtonClick} type="button" className="btn btn-primary">Testing</button>
            </h5>
        </div>

        <div id="collapseOne" className="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
            <div className="card-body">
                Content
            </div>
        </div>
    </div>
</div>

I'm trying to prevent the Testing button from collapsing the accordion. Upon reading a bit about this issue, I came across stopPropagation() method, which I tried implementing in an onClick function:

onButtonClick = (e: any) => {
   e.stopPropagation();
}

However this does not do the job. Any idea how to go about solving this issue?

score 0 · Answer 1 · answered Jan 30 '18 at 09:50

Not sure if this would work, but have you tried passing the event explicitly on the HTML, like onClick={this.onButtonClick(event)}? If you provided a JSFiddle, we could try it out before suggesting it. :)

You can also try this answer, since apparently React events are not actual Native Events, but Synthetic Events instead (reference here).

stopPropagation not working in Bootstrap accordion

1 Answers1