Select2 is not entering search

Question

I am at a slight impasse. Only one Select2 in my system is not working the search field. It makes the implementation of the plugin, however in the search field it does not allow entering the data. It is separated in a modal.Follows below the code snippet:

<div class="form-row">
    <div class="form-group col-md-12">
        <label>Advogado:</label><br/>
        <select class="form-control selectDois" name="advogado"style="width: 300px; !important">
            <option value="" selected="selected"></option>
            @foreach($advogados as $advogado)
            <option value="{{$advogado->id}}">{{$advogado->user->nome}}</option>
            @endforeach
        </select>
    </div>
</div>

selectDois implector

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<script>
    //select 2
    $(document).ready(function() {
        $('.selectDois').select2();
    });
 </script>

The idea is this... When I click on the button, it opens a modal to link a lawyer, however select two implements, but does not let insert anything in the search field....

Answer 1

Just set the dropdownParent property with the id of your dropdown. I put an example using bootstrap 4 to give you an idea of how it looks.

$('.selectDois').select2({
  width: '100%',
  dropdownParent: $('#exampleModal')
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <select class="form-control selectDois">
          <option>Valor 1</option>
          <option>Valor 2</option>
          <option>Valor 3</option>
          <option>Valor 4</option>
          <option>Valor 5</option>
          <option>Valor 6</option>
          <option>Valor 7</option>
          <option>Valor 8</option>
        </select>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>