CODEWITHSUNDEEP
reactjsreact-bootstrapjquery-eventsstoppropagation
Mark
Mark

Reputation: 1347

stopPropagation not preventing bubbling with Bootstrap popover

I am attempting to prevent clicks on a React Bootstrap popover from bubbling up and triggering the onClick handler on a parent element. Using the standard event.stopPropagation() does not, in fact, stop propagation, nor does its native counterpart:

Please see the working reduced test case on JSBin.

My current approach (within the parent's onClick event) is to check if the target element is inside the popover's DOM tree (using jQuery.has for convenience):

function onParentClicked(e) {
    if (!$(this.refs.parentElement).has(e.target)) {
        // click did NOT originate from popover
    }
}

This approach mostly works, but seems like a hacky workaround for simply using stopPropagation in the child's onClick handler.

Is this possibly a React Bootstrap bug? Or am I missing something in how I should be handling this logic?

Upvotes: 1

Views: 1922

Answers (1)

frontsideair
frontsideair

Reputation: 528

You could try putting Popover outside the parent div?

Upvotes: 1

Related Questions