disabled input for autocomplete using Select2

Question

I am using SELECT2 to perform an autocomplete

<select  class="js-example-basic-single" id="existeField">
    <option value="" disabled selected>Selectionnée le
                                    champs</option>
    <option th:each="fields: ${listFields}" th:value="${fields.id}"
        th:data-jira="${fields.idJira}" th:data-type="${fields.type}"
        th:data-defaut="${fields.value}" th:text="${fields.nom}">
   </option>
</select> 



<script>
    $(document).ready(function() {
        $(".js-example-basic-single").select2();   

    });
</script>

and it disabled the input also the design is not very good

Answer 1

The problem was not in the SELECT2 but it was in the modal (it is a standard bootstrap modal)

The Modal

  <div class="modal fade" id="exampleModal" name="exampleModal"
                tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
                aria-hidden="true">
                <div class="modal-dialog" role="document">

  ....

The solution is to simplly remove tabindex="-1" and every thing will be OK.

Hope that weill help some one.