在输入字段中单击时，菜单下拉菜单中的表单不会保留-Bootstrap3

Question

I have bootstrap site I am working on and it has very typical, straight from bootstrap navbar. One of the links in the navbar menu drops down to a login form. However, as soon as I click inside the form, it collapses back as if it was a hyperlink. I tested it alone in a FIDDLE so I know that is not something else conflicting in my code and as you can tell it is still not working as it should.

Does anyone know what is going on here? and how to fix it.

Do I need to add a JS hook passing a show function? SOmething like this didn't work

<script>        
    $(document).ready(function () {
        $('.dropdown-toggle').show('click') //I also tried 'focus'
    });
</script>

The fiddle works for me, but apparently not for others. So I created a video showing you the fiddle and the bootstrap implementation as they have it in their own website (which of course it works for them )

SEE VIDEO HERE

Answer 1

AH! I found it! Well, anyway, here it is for anyone who may have this problem in the future, which I can see that there are many already asking this question and many using Bootstrap.

Add the following at the bottom:

<script>
    $(document).on('click', '.dropdown-menu', function (e) {
        e.stopPropagation()
    })
</script>

Make sure the classes match and you are on your way!