はじめに
Bootstrapのナビゲーションバーを使用して作成した、ハンバーガーメニューがトグルスイッチをクリックしても動作しませんでした。
はじめ、自分のBootstrapに関するコーディングミスかと思い、調査したのですが、結果2020年4月10日に3.5.0にアップデートされたjqueryが原因でした。
環境
- rails 6.0.2.2
- bootstrap 4.4.1
- jquery 3.5.0
現象
bootstrapのナビゲーションバーを使用して作成した、ハンバーガメニューがクリックしても動作しない。
ハンバーガーメニューを押下した際、chrome検証ツールのコンソールに、以下のエラーが出力されている。
bootstrap.js:1498 Uncaught TypeError: Cannot convert object to primitive value
at RegExp.test (<anonymous>)
at HTMLDivElement.<anonymous> (bootstrap.js:1498)
at Function.each (jquery.js:325)
at jQuery.fn.init.each (jquery.js:165)
at jQuery.fn.init._jQueryInterface [as collapse] (bootstrap.js:1492)
at HTMLDivElement.<anonymous> (bootstrap.js:1552)
at Function.each (jquery.js:325)
at jQuery.fn.init.each (jquery.js:165)
at HTMLButtonElement.<anonymous> (bootstrap.js:1547)
at HTMLDocument.dispatch (jquery.js:4670)
(anonymous) @ bootstrap.js:1498
each @ jquery.js:325
each @ jquery.js:165
_jQueryInterface @ bootstrap.js:1492
(anonymous) @ bootstrap.js:1552
each @ jquery.js:325
each @ jquery.js:165
(anonymous) @ bootstrap.js:1547
dispatch @ jquery.js:4670
elemData.handle @ jquery.js:4490
原因
2020/4/10にアップデートされたjquery 3.5.0に伴い顕在化したbootstrapの不具合(と想定。私もはっきりとは読み取れず)
対処方法
現状の対処
jqueryを3.5.0から3.4.1にダウングレードする
→ ハンバーガメニューが動作することを確認。
将来的な対応
根本的な修正はBootstrap 4.4.2版で適用される模様(すでにgithub上では、修正版がcommit&mergeされていました)
参考
Bootstrap data-toggle for collapse failing · Issue #2147 · LD4P/sinopia_editor
Bootstrap v4.4.1 collapse doesn't work with jQuery v3.5.0 · Issue #30553 · twbs/bootstrap
追記
2020/5/4にjqueryのv3.5.1が公開され、v3.5.1を使用することで上記不具合は解消されました。