Materialize: Conflicting Initialization for Multiple Select and Dropdown

Created on 15 Aug 2018 · 2Comments · Source: Dogfalo/materialize

When your page contains a multiple select and a dropdown, initializing the select before the dropdown by following the current documentation makes the multiple select close when an option is clicked.

Expected Behavior

It should not matter in which order a component is initialized

Current Behavior

Initializing a FormSelect marked with multiple before initializing Dropdown with the selector .dropdown-trigger as currently documented at https://materializecss.com/dropdown.html#initialization closes the select when an option is clicked.

Possible Solution

Using another class than dropdown-trigger for selects,
Using another class than dtopdown-trigger for dropdown or
Adding an explicit note in the documentation about initialization order

(This seems to mainly be a documentation problem but it would be nice if the initializers would not interact at all)

Steps to Reproduce

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

<div class="row">
    <div class="input-field col s12 m8 xl6">
        <select name="notWorking" required multiple>
            <option value="" disabled>Choose your option</option>
            <option value="1">Opt1</option>
            <option value="2">Opt2</option>
            <option value="3">Opt3</option>
        </select>
        <label>A multiselect that does not work</label>
    </div>

    <div class="input-field col s12 m8 xl6">
        <select name="working" required multiple>
            <option value="" disabled>Choose your option</option>
            <option value="1">Opt1</option>
            <option value="2">Opt2</option>
            <option value="3">Opt3</option>
        </select>
        <label>A working multiselect</label>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    M.FormSelect.init(document.querySelector("select[name='notWorking']"));

    M.Dropdown.init(document.querySelectorAll('.dropdown-trigger'));

    M.FormSelect.init(document.querySelector("select[name='working']"));
});
</script>

Also available as a codepen at https://codepen.io/anon/pen/djERMm?editors=1010