jqueryjquery-select2ui-select2

disabled input for autocomplete using Select2

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

enter image description here

Solution

  • 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.