Instantclick Breaks Bootstrap Dropdowns

[connor4312]

Ran into this issue today. On page navigation, Bootstrap-based dropdowns (on click) no longer work. They do work on the initial page, but after any kind of navigation takes place, they no longer appear when their navigation item is clicked..

My HTML structure looks like:

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                        <ul class="dropdown-menu">
                            <li><a href="/foo">Foo Item</a></li>
                            <li><a href="/bar">Bar Item</a></li>
                        </ul>
                    </li>

I'm loading Instantclick via:

InstantClick.init("mousedown")

I believe this is an Instantclick issue, as the dropdowns worked previously and, as far as I can tell, Instantclick is being initialized correctly.

There is one error in the console, "Uncaught ReferenceError: orientation is not defined " from L533.

[connor4312]

Well I fixed the latter error in https://github.com/dieulot/instantclick/pull/51. Did not fix the dropdown breakage, however.

[Silhm]

Got the same here, the thing is that when you click again on the same link (I have a sidebar navigation that is always visible on the left) , the Bootstrap dropdown in the header is working again. Still a problem though...

[dieulot]

I’ll try to check that later, out-of-the-box compatibility isn’t one of my priority at the moment though, so this may take a bit of time.

By “previously”, do you mean when you didn’t have InstantClick, or when you had a previous version of InstantClick?

[connor4312]

Without instaclick, it works. With instaclick, it does not work after navigation.

[rattrayalex]

I'm having the same problem with Bootstrap's Collapse

[rattrayalex]

Adding data-no-instant to the bootstrap script seems to work...

[jocooler]

I made a quick fix of this which might have other repercussions, but in isPreloadable(a) I added this check: || a.href.indexOf('#') === a.href.length - 1 -> in other words, if the link ends with a # by itself, don't preload it. In my case, I know that all the links ending with # are bootstrap toggles, so that fixed it. YMMV.