remove_button plugin closes bootstrap dropdown

[sylido]

I have a bootstrap dropdown which contains a form, one of the input elements is a selectize input text on which I wanted tags. Addings tags worked nicely, then came the time to remove them by clicking the x button on the right, added byt he remove_button plugin. When doing that, the whole dropdown would get triggered and the whole form would get hidden.

There is no easy way to control the events as they are closed off, the only solution I could find was to "rewrite" the plugin, doing e.stopPropagation(); just before `e.preventDefault();' in the click event handler. This works, but why isn't it the default in order to avoid situations like that ?

I figure it's something to do with closing the typeahead dropdown that shares bootstrap dropdown classes. Is there a better way to avoid this happening ?

[sspread]

I have the same issue. The remove button on tags closes my Foundation Reveal modal. My hack solution edits source code by adding return false; to remove_button click handler.

[msevcenko]

+1 on this one. Is there a chance this gets fixed?

I think that stopPropagation or returning false from the handler is the correct solution. We want to mark the event as consumed so it should not bubble to parent elements. Are there some drawbacks of this fix?

There is also one unfortunate circumstance - at the time the event bubbles, the element that caused the event (event.target) is already removed from the DOM. Dialogs usually test that when user clicked inside the dialog, the dialog should not close. This test however fails because the target element is no longer in the dialog.

The workaround thus might be that dialog also should not close when target element is no longer in the DOM, this however requires modifying the dialog logic.

[sylido]

@msevcenko this will never get fixed as the issue is 5 years old, you should make a separate branch with the change that risadams made in his branch. Closing this as selectize seems dead.