How can I remove Materialize's select dropdown when using select2?

Question

I use both MaterializeCSS and Select2, and have a normal :

<label>Seleção de PFJ</label>
<select id="manual-download-pfj-select" name="pfj-select" multiple></select>

And then:

$("#manual-download-pfj-select").select2({width: "100%"});

All ok except for one problem:

I get this annoying dropdown repetition (Which is the default one from MaterializeCSS, but it has no search function, so I want to just remove it). I've seen libraries to combine MaterializeCSS and Select2, but they're useless since they only change the colours / theme, keeping the useless repetition. Either one, or the other, with the search function.

Answer 1

I've managed to do it by removing the visilibity of the select-wrapper directly:

.select-wrapper {
    display: none !important;
}

Which is far from ideal, but it seems to be the only way. Now I can use those .css adaptations to make Select2 look like MaterializeCSS.

Answer 2

I would use the browser-default class, which tell the framework to skip the element:

<div class="row">
  <label class="">Seleção de PFJ</label>
    <select class="browser-default" multiple>
      <option value="1">example 1</option>
      <option value="2">example 2</option>
      <option value="3">example 3</option>
    </select>
</div>

This will keep the search functionality of Select2 :