Dropdown data-toggle="dropdown" element click events not bubble

[njake]

_addEventListeners function has two functions to prevent default link actions.
event.preventDefault()
event.stopPropagation()

If link element is not used for toggle, disabling events are not nesessary at all?

Reason is i need attach events to all toggle elements to get click events wanted from toggle elements.
Better way is to attach single event listener to parent and use event.target, this is not working now.

Is it possible to add check if toggle element is link, then add those events something like:
if(this._element.nodeName == 'a'){ event.preventDefault(); event.stopPropagation(); }
or using data attribute to disable/enable bubling.

[MartijnCuppens]

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via CodePen/JS Bin or Stackblitz and report back with your link, Bootstrap version, and specific browser and OS details.

This is an automated reply

[njake]

Here is demo code. codepen
When you click dropdown toggle button -> event fires one time only.
Another clicks to toggle button never give events to container div.

[XhmikosR]

I wonder if this issue is present on v5 too?

[sijusamson]

@XhmikosR In v5, no event is being fired when I click on dropdown. Codepen for reference. Well if we remove event.stopPropagation() from /js/src/dropdown.js will resolve this issue.
Well, I wonder why event.stopPropagation() was added in dropdown.

[XhmikosR]

PRs welcome for both branches as usual, just make sure we have tests that catch the issue.

[MartijnCuppens]

Well, I wonder why event.stopPropagation() was added in dropdown.

Didn't look into the code, but buttons which are added can trigger form submits and <a>'s will trigger page navigation. That's probably why that was added.

[patrickhlauke]

was the stopPropagation added to cater for odd situations like form controls inside the dropdowns? I have vague memories of something along those lines from back in the day...

[caseyjhol]

Well, I wonder why event.stopPropagation() was added in dropdown.

Didn't look into the code, but buttons which are added can trigger form submits and <a>'s will trigger page navigation. That's probably why that was added.

event.preventDefault() should be all that's needed for that use case.

[samihoda]

Any news on this fix?

[pchaganti]

Any chance the above PRs will get accepted?

thanks

[njake]

Removing event.stopPropagation() looks fine to me.

Tested with raw change like this and toggle button not work correctly anymore.

$.fn.dropdown.Constructor.prototype._addEventListeners = function _addEventListeners() {
    var _this = this;
    $(this._element).on('click.bs.dropdown', function(event) {
        event.preventDefault();
        _this.toggle();
    });
};