javascript - Materializecss select double click to toggle - Stack Overflow

admin管理员组

文章数量:1287636

I am using MaterializeCSS to create a select 'dropdown' menu. On a Mac laptop the dropdown is working fine (tested in Safari and FireFox, and in IE and Chrome through browserling). However, when I browse the website from a Windows puter (IE and Chrome) I always have to double click to toggle the dropdown. I don't understand why this issue happens. I would appreciate if anyone can point to a specific issue with the code as set out below:

  <div class="dropdown-div">
    <div class="input-field">
      <select>
        <option value="1" class="dropdown-text"><a class="dropdown-text-default" data-url="#General">General</a></option>
        <option value="2"><a class="dropdown-text" data-url="#Option1">Option1</a></option>
        <option value="3"><a class="dropdown-text" data-url="#Option2">Option2</a></option>
        <option value="4"><a class="dropdown-text" data-url="#Option3">Option3</a></option>
        <option value="5"><a class="dropdown-text" data-url="#Option4">Option4</a></option>
      </select>
    </div>
  </div>


  <script src=".99.0/js/materialize.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
    $('select').material_select();
  });
  </script>

Please find the documentation from MaterializeCSS here.

I am using MaterializeCSS to create a select 'dropdown' menu. On a Mac laptop the dropdown is working fine (tested in Safari and FireFox, and in IE and Chrome through browserling.). However, when I browse the website from a Windows puter (IE and Chrome) I always have to double click to toggle the dropdown. I don't understand why this issue happens. I would appreciate if anyone can point to a specific issue with the code as set out below:

  <div class="dropdown-div">
    <div class="input-field">
      <select>
        <option value="1" class="dropdown-text"><a class="dropdown-text-default" data-url="#General">General</a></option>
        <option value="2"><a class="dropdown-text" data-url="#Option1">Option1</a></option>
        <option value="3"><a class="dropdown-text" data-url="#Option2">Option2</a></option>
        <option value="4"><a class="dropdown-text" data-url="#Option3">Option3</a></option>
        <option value="5"><a class="dropdown-text" data-url="#Option4">Option4</a></option>
      </select>
    </div>
  </div>


  <script src="https://cdnjs.cloudflare./ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
    $('select').material_select();
  });
  </script>

Please find the documentation from MaterializeCSS here.

• javascript
• jquery
• html
• materialize

Share Improve this question Follow edited May 1, 2019 at 14:42 ChartProblems asked May 1, 2019 at 14:37 ChartProblemsChartProblems 43755 silver badges1919 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 11

This is a regression bug in Chrome 73. To solve the problem use following code: (This is the only solution I could find.)

$('select').material_select();
document.querySelectorAll('.select-wrapper').forEach(t => t.addEventListener('click', e=>e.stopPropagation()))

The answer is stopPropagation(). But important point is you must wait for bo's initialization.

 $(document).ready(function () {
                //Give a time for initialization of bos
                setTimeout(function () {
                    var kelle = $('.select-wrapper');// $('.select-wrapper');
                    $.each(kelle, function (i, t) {
                        t.addEventListener('click', e => e.stopPropagation())
                    });
                }, 500)
            });

Here's a hack, using jQuery

$('.select-dropdown').trigger("click");

I've had the same issue on materialize selects, I couldn't find a patch anywhere.

So the theory is, If it works with a double click, then trigger another click on this instance.

Here's the context I applied it for my application

I have a select drop down like:

<div class="input-field ingredient-unit">
  <select name="" id="ingredient-unit">
     <option value="gr" selected>gr</option>
     <option value="kg" >kg</option>
     <option value="cups" >cups</option>
     <option value="ml" >ml</option>
     <option value="L" >L</option>
     <option value="tsp" >tsp</option>
     <option value="Tbsp" >Tbsp</option>
     <option value="pcs" >pcs</option>
 </select>
 <label for="ingredient-unit"></label>
</div>

To get the value of this select, I have a javascript function like:

$('.add-ingredient-button').click(function(){

    // due to a materialize css bug with chrome, take two clicks to activate the given selection
    // we hack this by triggering another click on the #ingredient-unit instance here
    $('.select-dropdown').trigger("click");

    //then we get the dropdown instance, everything else can be done with jQuery
    const ingredientUnit = M.FormSelect.getInstance($('#ingredient-unit'));


    // we need to grab information from all those boxes
    const name  = $('#ingredient-name').val();
    const value = $('#ingredient-value').val();
    const unit  = ingredientUnit.getSelectedValues();
    console.log(name,value,unit);
});

When the button with class .add-ingredient-button is pressed, we want to get the ingredient name, value and unit. The unit is in a materialize select instance.

So the function is triggered when we click on .add-ingredient-button, and we 'manually' trigger another click on the select instance, which effectively picks the unit that the user had already selected.

I'm not sure why this error occurred, and I can't really tell you why this is working. But it works.

I hope it helps!

本文标签： javascriptMaterializecss select double click to toggleStack Overflow