【トラブル】【MDB】Material Design for Bootstrap 4 におけるトラブルシュート

【1】ツールチップやポップオーバーが表示されない

 * 以下の関連記事の「Bootstrap 4 で ツールチップやポップオーバーが表示されない」と同件。
https://blogs.yahoo.co.jp/dk521123/37655508.html

【2】フローティングラベルが動かない

 フローティングラベルが実装できなかった
表示されているサンプル(https://mdbootstrap.com/previews/free-templates/admin/dashboard.html)と
の差異を調べてみると、ロードする際に、Firefoxの場合「e is null」っとなり、
Nullポインタ例外が発生していた
【例外箇所抜粋】
    Waves.init = function(options) {
        var body = document.body;

        options = options || {};

        // ... 略 ...

        // body が nullだったのでエラーになっていた
        body.addEventListener('mousedown', showEffect, false);
    };
https://github.com/mdbootstrap/bootstrap-material-design/issues/31
https://github.com/mdbootstrap/bootstrap-material-design/issues/49
より抜粋
~~~~~~~
I marked this as a bug and added to our TODO list
~~~~~~~

どうも、バグっぽい。

解析

 以下のように、nullポインタを発生させなかったところ、
フローティングラベルが表示され、動いている
暫定対処 (現象発生せず)
if (!body) {
   console.log("[Info] add mousedown Event");
   body.addEventListener('mousedown', showEffect, false);
} else {
   console.log("[Warn] body is null...");
}

対応案

https://mdbootstrap.com/support/js-loading-issue/
で
~~~~~~~
document.body is null, thatswhy the waves method throws an exception
 (and mouse over waves effects do not work..)…

But I am the only one who gets this error?
My *.js files are loaded in html head,
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 of course, but obviously the method is called prior the DOM has a body element.
Maybe I should put the script tags into END OF body, 
                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~
との記載を発見。

 確かに、現象が発生しているコンテンツを確認したところ、
【修正前】のように、headタグ内にあった。
【修正前】
<html>
<head>
 ...
   <script src="/libs/js/jquery-3.2.1.js" type="text/javascript"></script>
   <script src="/libs/js/popper.js" type="text/javascript"></script>
   <script src="/libs/js/bootstrap.js" type="text/javascript"></script>
   <script src="/libs/js/mdb.js" type="text/javascript"></script>
</head>
<body>
...
</body>
</html>
【修正後】
<html>
<head>
 ...
   <script src="/libs/js/jquery-3.2.1.js" type="text/javascript"></script>
   <script src="/libs/js/popper.js" type="text/javascript"></script>
   <script src="/libs/js/bootstrap.js" type="text/javascript"></script>
</head>
<body>
...

   <!-- ★ </BODY>内にmdb.jsを移動 ★ -->
   <script src="/libs/js/mdb.js" type="text/javascript"></script>
</body>
</html>

【3】グループボタンが思った通りな値が取れない

 * 以下「現象発生したコンテンツ」で、サイトを作ったが、
   onChangeイベントでチェックされたかどうかを判定したのだが
   思った値が取得出来ない

現象発生したコンテンツ

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-mdb-color form-check-label active">
        <input class="form-check-input" type="checkbox" autocomplete="off"> Japanese
    </label>
    <label class="btn btn-mdb-color form-check-label" active>
        <input class="form-check-input" type="checkbox" autocomplete="off"> English
    </label>
    <label class="btn btn-mdb-color form-check-label" active>
        <input class="form-check-input" type="checkbox" autocomplete="off"> Franch
    </label>
</div>

原因

下らないことだが...
 * 以下のように「active」と「checked」を同期させてなかった
   => これができてなくて、はまってしまった...
~~~~~~~~~~
<label class="btn btn-mdb-color form-check-label active"> <!-- <= 'active'を付加 -->
    <input class="form-check-input" type="checkbox" autocomplete="off" checked> Pre-checked <!-- <= 'checked'を付加 -->
</label>
~~~~~~~~~~
以下のサンプルも、「active」と「checked」を同期している
https://mdbootstrap.com/components/bootstrap-button-group/

関連記事

Material Design for Bootstrap 4 ~ 入門編 ~

https://blogs.yahoo.co.jp/dk521123/37632575.html

Bootstrap 4 におけるトラブルシュート

https://blogs.yahoo.co.jp/dk521123/37655508.html