Dropdown forms disappears on click

[vosidiy]

I made dropdown login form, When you click on content of the dropdown it will close

[vosidiy]

I think it should close only for outside click, not inside dropdown.
Check this github's top right button and click on text "Signed in as". it will not close.

[patrickhlauke]

bug reports / issues need a working reduced test case showing the problem.

for what it's worth, out of the box bootstrap's form dropdowns don't close when clicking outside of links/form controls - see https://www.bootply.com/mhuf1l1jAV ... so might be a problem with whatever extra code you're running

[vosidiy]

@patrickhlauke
Only when you use the < form > tag for dropdown-menu it will work. Otherwise, it is closing on click
Check this demo
https://codepen.io/vosidiy/pen/BrPqjQ

[Johann-S]

That's due to this line: https://github.com/twbs/bootstrap/blob/v4-dev/js/src/dropdown.js#L57

But @vosidiy can you explain to us why it's an issue ? Because you just have to add a form tag to make it works

[vosidiy]

@Johann-S then how to create tabs or some clickable element inside the dropdown-menu

(see screenshot example, there is no any form element)
So should we use always < form > tag even if there is no form element?

[Johann-S]

that's right seems to me a valid use case.

Any concerns @patrickhlauke or @mdo ?

[patrickhlauke]

indeed it would make sense to keep the dropdowns more generic and to swallow (as in, don't close the dropdown) any clicks inside the dropdown container itself regardless of content. authors WILL use dropdowns for any sort of arbitrary content beyond just forms, so i'd rather see us tackle this use case directly instead of expecting authors to have to hack it.

[italodirenzo93]

I'd like to try tackling this issue. Has it been agreed upon that dropdowns will not auto-close on clicks made inside the container?

[RyanBerliner]

I know this is an older issue, but the behavior is still present in BS4 and (if I'm looking at the correct place) planned for BS5 as well. I'd also like to suggest that dropdowns do not toggle closed when clicking inside of them (by default, at least).

https://github.com/twbs/bootstrap/blob/main/js/src/dropdown.js

The dropdown js confirms the behavior that clicking inside of a form within the dropdown does not close the dropdown, but clicking elsewhere inside the dropdown does. There are many use cases where you'd want the dropdown to stay open outside of using a form within it. For example, let's say there is a dropdown full of links, and you click one. I'd think the dropdown should stay open until either the new location loads, or you manually trigger a closure after something happens. When it disappears as it currently does, it can be disorienting.

I'd argue it is almost always going to be a better user experience for the item you click on to remain visible. Is there a major use case I'm missing or not understanding as to why dropdowns close when clicking inside of them currently?

[mdo]

This was addressed with #33389.