Question: I am newbie to Python and Django. I'm using DAL on a form inside a Bootstrap modal. Clicking the dropdown list appears behind the modal. The autocomplete function works correctly if I do it outside of the modal. I'm using: Django: 4.0.5 django-autocomplete-light: 3.9.4 Bootstrap 5.2.2 Python 3.10.4 To try to fix it, I have created a style.css file with the following code, as indicated in: bootstrap modal with select2 z-index .select2-container { z-index: 9999 !important; }  Now the list appears in front of the modal, but it doesn't allow typing in the search box. I've tried doing the following, but it doesn't work: https://select2.org/troubleshooting/common-problems  $(document).ready(function() { $("#codigo_emplazamiento").select2({ dropdownParent: $("#FormularioCrear") }); });  I've tried removing tabindex="-1" from the modal, but it doesn't work. It seems to be related to this, but I can't get it to work: https://lightrun.com/answers/yourlabs-django-autocomplete-light-search-input-not-receiving-focus This is my code: forms.py class FormularioTarea(forms.ModelForm): class Meta: model = Tarea fields = ['referencia_interna', 'codigo_emplazamiento', 'estado', 'fecha_fin', 'tipo_documento'] autocomplete.ModelSelect2(url='emplazamientoautocompletar')}) widgets = { 'codigo_emplazamiento': autocomplete.Select2( url='emplazamientoautocompletar', ) }  models.py class Emplazamiento(models.Model): TIPO_ELECCION = (('URB', 'Urbano'), ('RUR', 'Rural')) codigo_emplazamiento = models.CharField(unique=True, max_length=10) direccion = models.CharField(max_length=254) municipio = models.ForeignKey(Municipio, on_delete=models.PROTECT) ref_catastral = models.CharField(max_length=14, blank=True) tipo_emplazamiento = models.CharField(max_length=15, choices=TIPO_ELECCION) latitud = models.DecimalField( blank=True, null=True, decimal_places=10, max_digits=13) longitud = models.DecimalField( blank=True, null=True, decimal_places=10, max_digits=13) def save(self, *args, **kwargs): self.codigo_emplazamiento = self.codigo_emplazamiento.upper() return super(Emplazamiento, self).save(*args, **kwargs) class Meta: ordering =('-id',) def __str__(self): return (self.codigo_emplazamiento) class Tarea(models.Model): referencia_interna = models.CharField(max_length=20, unique=True) codigo_comparticion = models.CharField(max_length=20, unique=True, blank=True, null=True) ESTADOS_DE_TAREA = (('PENDIENTE', 'Pendiente'), ('EN_CURSO', 'En Curso'), ('FINALIZADO', 'Finalizado')) codigo_emplazamiento = models.ForeignKey(Emplazamiento, on_delete=models.PROTECT) estado = models.CharField(max_length=15, choices=ESTADOS_DE_TAREA) SELECCION_DE_DOCUMENTOS = (('PROYECTO', 'Proyecto'), ('ANEXO', 'Anexo'), ('PEP', 'Pep')) tipo_documento = models.CharField(max_length=15, choices=SELECCION_DE_DOCUMENTOS) fecha_entrada = models.DateField(auto_now_add=True) fecha_fin = models.DateField(blank=True, null=True) class Meta: ordering =('-id',) def __str__(self): return (self.referencia_interna + ' - ' + str(self.id))  urls.py urlpatterns = [ path('emplazamientos/autocompletar', EmplazamientoAutocomplete.as_view(), name = 'emplazamientoautocompletar'), ]  views.py class EmplazamientoAutocomplete(autocomplete.Select2QuerySetView): def get_queryset(self): #if not self.request.user.is_authenticated: # return Country.objects.none() qs = Emplazamiento.objects.all() if self.q: qs = qs.filter(codigo_emplazamiento__icontains=self.q) return qs  Modal in Template: <div class="modal fade" id="FormularioCrear" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="staticBackdropLabel">{{ titulocreador }}</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body" id="CuerpoModal"> <form method="POST" enctype="multipart/form-data" action=" {% url 'creatarea' %}"> {% csrf_token %} {{ formulario.as_p }} </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button> <button type="submit" class="btn btn-primary">Crear</button> </form> </div> </div> </div> </div> <script> $(document).ready(function() { $("#codigo_emplazamiento").select2({ dropdownParent: $("#FormularioCrear") }); }); </script>  Modal in rendered template: <div class="modal fade" id="FormularioCrear" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="staticBackdropLabel">Crea nueva Tarea</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body" id="CuerpoModal"> <form method="POST" enctype="multipart/form-data" action=" /proyectos/tareas/crear/"> <input type="hidden" name="csrfmiddlewaretoken" value="kWogOGY57TUQv49PCR5CroMbEmpMiM5qNUC17gTI6gPZjrq3riiuiXrhm2STNuTk"> <p> <label for="id_referencia_interna">Referencia interna:</label> <input type="text" name="referencia_interna" maxlength="20" required id="id_referencia_interna"> </p> <p> <label for="id_codigo_emplazamiento">Codigo emplazamiento:</label> <select name="codigo_emplazamiento" required id="id_codigo_emplazamiento" data-autocomplete-light-url="/proyectos/emplazamientos/autocompletar" data-autocomplete-light-function="select2" data-autocomplete-light-language="es"> </select> </p> <p> <label for="id_estado">Estado:</label> <select name="estado" required id="id_estado"> <option value="" selected>---------</option> <option value="PENDIENTE">Pendiente</option> <option value="EN_CURSO">En Curso</option> <option value="FINALIZADO">Finalizado</option> </select> </p> <p> <label for="id_fecha_fin">Fecha fin:</label> <input type="text" name="fecha_fin" id="id_fecha_fin"> </p> <p> <label for="id_tipo_documento">Tipo documento:</label> <select name="tipo_documento" required id="id_tipo_documento"> <option value="" selected>---------</option> <option value="PROYECTO">Proyecto</option> <option value="ANEXO">Anexo</option> <option value="PEP">Pep</option> </select> </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button> <button type="submit" class="btn btn-primary">Crear</button> </form> </div> </div> </div> </div> <script> $(document).ready(function() { $("#codigo_emplazamiento").select2({ dropdownParent: $("#FormularioCrear") }); }); </script> 

Answer: The problem is modal focus, so if you review the documentation https://getbootstrap.com/docs/5.3/components/modal/#options in options there's a definition for the focus. So at the end you just need to add data-bs-focus="false" to your modal definition. ...