現在、以下の環境で開発を行っています。
Ruby:2.3.1
Rails:5.0.0
MaterializeCSSを使用しているのですが、Selectボックスがどうしても動かない状態です。表示はされるのですが、プルダウンできない状態になります。
調査すると、JavaScriptのコードを追加すれば解決するというものが多いのですが、JavaScriptのコードは追加済みで、コードそのものは実行されていることを確認済みです。
1.VIEW(test.html.slim)
= form_for @test , html: {class: 'col s12' } do |f|
.input-field.col.s6
= f.select :topic, Test::TOPICS, {:prompt => ''}, :id => 'topic_area'
label[for="topic_area"]
| トッピック
※Testはモデルで、TOPICSという配列が定義されています。
2.生成されたHTML
<form class="col s12" id="new_test" action="/test" accept-charset="UTF-8" method="post">
<div class="input-field col s6">
<select id="topic_area" name="test[topic]">
<option value=""></option>
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
</select>
<label for="topic_area">トピック</label>
</div>
</form>
3.JavaScript(Common.js)
$(document).ready(function(){
$('select').material_select();
});
ちなみに、Selectボックスに"browser-default"をクラス指定すれば動くようにはなります。
また、Selectボックス以外のJavaScriptを使用する部分については問題なく動作しているため、MaterializeのJS含め、JavaScript(jQuery)は問題なく読み込まれている認識です。
また、Bootstrapも使用しているのですが、相性の問題とかも考えられるでしょうか。
以上です。ご教示頂けると助かります。宜しくお願い致します。