When I update to Drupal core 8.4.0-beta1 the Bootstrap dropdown menu doesn't work, I suppose it's because of jQuery v3.2.1 (which comes with Drupal 8.4.0-beta1).

Output of the console:

Uncaught Error: Syntax error, unrecognized expression: #
    at Function.ga.error (js_EHYsQD00R9GwPDvyOU-XfVp12M2ifMgYTx2HXBG9yDo.js:2)
    at ga.tokenize (js_EHYsQD00R9GwPDvyOU-XfVp12M2ifMgYTx2HXBG9yDo.js:2)
    at ga.select (js_EHYsQD00R9GwPDvyOU-XfVp12M2ifMgYTx2HXBG9yDo.js:2)
    at Function.ga [as find] (js_EHYsQD00R9GwPDvyOU-XfVp12M2ifMgYTx2HXBG9yDo.js:2)
    at r.fn.init.find (js_EHYsQD00R9GwPDvyOU-XfVp12M2ifMgYTx2HXBG9yDo.js:2)
    at r.fn.init (js_EHYsQD00R9GwPDvyOU-XfVp12M2ifMgYTx2HXBG9yDo.js:2)
    at r (js_EHYsQD00R9GwPDvyOU-XfVp12M2ifMgYTx2HXBG9yDo.js:2)
    at getParent (js_EHYsQD00R9GwPDvyOU-XfVp12M2ifMgYTx2HXBG9yDo.js:1974)
    at HTMLAnchorElement.<anonymous> (js_EHYsQD00R9GwPDvyOU-XfVp12M2ifMgYTx2HXBG9yDo.js:1984)
    at Function.each (js_EHYsQD00R9GwPDvyOU-XfVp12M2ifMgYTx2HXBG9yDo.js:2)

The problem can be solved by removing data-target="#" in templates/menu/menu.html.twig as this attribute is not necessary at all for dropdown menus. But I'm not sure that this would be the ideal solution.

CommentFileSizeAuthor
#3 updating_to_drupal_core-2903656-3.patch2.14 KBedurenye
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

kittiradovics created an issue. See original summary.

edurenye’s picture

edurenye CreditAttribution: edurenye at ENDPHASYS Technologies commented

I'm experiencing the same issue, although on top of it I'm using bootstrap-dropdown-hover and it unfolds on hover (from time to time) but it does not on click event.
And yes, without the data-target it works like before.

edurenye’s picture

edurenye CreditAttribution: edurenye at ENDPHASYS Technologies commented
FileSize
updating_to_drupal_core-2903656-3.patch2.14 KB

Removed the data-target, with this change the menu works fine in Drupal 8.4.0-beta1

edurenye’s picture

edurenye CreditAttribution: edurenye at ENDPHASYS Technologies commented
Status: Active » Needs review
DuneBL’s picture

DuneBL
Primary language French
CreditAttribution: DuneBL commented

I confirm #3 is solving this issue also for 8.5
Many thanks!!

BOGUƎ’s picture

BOGUƎ CreditAttribution: BOGUƎ as a volunteer commented

#3 works here too -- nice catch @edurenye!

kittiradovics’s picture

kittiradovics CreditAttribution: kittiradovics commented

#3 works with 8.4.0-rc1 too. Thanks @edurenye for the patch!

mabuweb’s picture

mabuweb CreditAttribution: mabuweb as a volunteer and commented

#3 works fine on Drupal core 8.4.0-beta2 with bootstrap 8.x-3.6 . Thanks @edurenye!

collin.rickford’s picture

collin.rickford CreditAttribution: collin.rickford commented

Patch working on Drupal 8.4.0-rc2 with bootstrap 8.x-3.5 as well, thank you @edurenye.

Dakwamine’s picture

Dakwamine
Primary language French
CreditAttribution: Dakwamine at Eurelis commented

#3 works with Drupal 8.4.0-rc2 on bootstrap 8.x-3.5. Thank you!

mlecha’s picture

mlecha CreditAttribution: mlecha commented

#3 works with Drupal 8.4.0-rc2 on Bootstrap 8.x-3.6. Thanks!

Christopher Riley’s picture

Christopher Riley CreditAttribution: Christopher Riley commented

This fixes the issue with 8.4 now that it has been released.

milesgwood’s picture

milesgwood CreditAttribution: milesgwood commented

#3 solves the issue caused by jQuery3 updates in Druapl 8.4.0. Prior to deleting data-target it produced an error whenever "#" was used as a jQuery selector. This is a much better fix than editing bootstrap.js directly.

  • markcarver committed b5fde9d on 8.x-3.x authored by edurenye 
    Issue #2903656 by edurenye, kittiradovics: Updating to Drupal core 8.4.0...

markcarver credited markcarver.

markhalliwell’s picture

markhalliwell
Primary language English
CreditAttribution: markhalliwell at Tag1 Consulting commented
Status: Needs review » Fixed
ion.macaria’s picture

ion.macaria CreditAttribution: ion.macaria as a volunteer and commented
Status: Fixed » Active

With current drupal version 8.4.0, this issue still persists.
#3 It's not a solution because after removing data-target="#" javascript does not working properly.
It seems like this is even a bootstrap problem.
https://github.com/FezVrasta/bootstrap-material-design/issues/1137

ion.macaria’s picture

ion.macaria CreditAttribution: ion.macaria as a volunteer and commented
Priority: Normal » Critical

As I can guess this issue breaks all bootstrap subthemes with last drupal version.

ion.macaria’s picture

ion.macaria CreditAttribution: ion.macaria as a volunteer and commented
Priority: Critical » Normal
Status: Active » Fixed

After some tests I can confirm: deleting data-target="#" will solve this issue.
My problem was duplicated javascripts with CDN scripts. They runs twice (one opened and one closed dropdown)
If we use a CDN, we have to delete Boostrap scripts from subtheme.
Sorry for confusion!

ion.macaria’s picture

ion.macaria CreditAttribution: ion.macaria as a volunteer and commented

@markcarver please apply this patch to stable version, to be able to update all existing projects in Drupal 8.4.0.
Thank you!

chrotto’s picture

chrotto CreditAttribution: chrotto commented

Removing data-target="#" in templates/menu/menu.html.twig did not work for me on Drupal 8.4.0
Also using CDN. What more do I have to do?

Skin’s picture

Skin
Primary language Italian
Location Italy
CreditAttribution: Skin commented

@chrotto try to remove data-target="#" also from /templates/menu/menu--account.html.twig and /templates/menu/menu--main.html.twig

chrotto’s picture

chrotto CreditAttribution: chrotto commented

Thank you, @skin!
That did it.

m.zerres’s picture

m.zerres CreditAttribution: m.zerres commented

Deleting data-target="#" on all menu templates does't work for me with Drupal 8.4. and Bootstrap theme 3.6.

edurenye’s picture

edurenye CreditAttribution: edurenye at ENDPHASYS Technologies commented

Try cleaning the cache.
Try it after applying the patch or with the last version of the development branch that will have this patch already applied.

m.zerres’s picture

m.zerres CreditAttribution: m.zerres commented

Yes, it's working now. I forgot to apply this to menu--footer.html.twig

KrypticBit’s picture

KrypticBit CreditAttribution: KrypticBit commented

Followed the steps and applied the patch to every file I could think of. I have confirmed that there is no data-target="#" in either the theme directory (including the sub theme) or the modules directory.
Cleared the caches etc.
But I still get the error and no drop down menu...
Where else could bootstrap be hiding files?

Edit: Finally have it working. Apparently the patch didn't work on a part of one file.

Anonymous’s picture

Anonymous (not verified) CreditAttribution: Anonymous commented

I think that this patch should be rejected.

The Bootstrap 3 theme has a lot more dropdown requirements than just the menu templates: take a look at the form item templates, for example.
In addition there are requirements for dropdowns in core modules, such as Views (Global: Dropdown).

At this stage the scope of the fix should be to update the bootstrap.js, rather than the somewhat clumsy method of changing each and every twig template.

I am, of course, open to criticism on this.

markhalliwell’s picture

markhalliwell
Primary language English
CreditAttribution: markhalliwell at Tag1 Consulting commented

I think that this patch should be rejected.

Bootstrap already took care of this on their end: https://github.com/twbs/bootstrap/issues/16834#issuecomment-251996660. The code that was causing issues was, in fact, what the above patch solved.

At this stage the scope of the fix should be to update the bootstrap.js, rather than the somewhat clumsy method of changing each and every twig template.

Again, this project is not https://github.com/twbs/bootstrap, the framework itself, but rather a bridge between Drupal and Bootstrap. We don't have the ability, nor do we wish to have the responsibility, of maintaining the upstream project.

vunda’s picture

vunda CreditAttribution: vunda commented

I am having a problem displaying the drop down menu as administrator. However, after I logout, it works (and after I deleted data-target="#").

I'm running:
Drupal core 8.4.2

Bootstrap 8.x-3.6

Web Server
Apache/2.4.18 (Ubuntu)

Database
Version
9.4.10
System
PostgreSQL

Also, I am getting this error in my "Console" jquery.min.js:4 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

I think, this is the right version of jquery.min.js

Please, help.

Thanks,

markhalliwell’s picture

markhalliwell
Primary language English
CreditAttribution: markhalliwell at Tag1 Consulting commented
Status: Fixed » Closed (fixed)

I’m closing comments on this issue. It has been fixed and is just turning into a “catch all” for people who don’t understand how jQuery works.