Bootstrap Modals: imposible hacer focus en campo de formulario

B

Recientemente, para un proyecto que estoy desarrollando, me encontré con un problema cuando intentaba presentar un campo especial de formulario. A continuación explico la situación.

El problema

Al cargar un cuadro modal de Bootstrap (utilizando bootbox), en el cual al mismo tiempo cargo un campo especial de formulario, que se controla vía JavaScript, y que obtiene datos medianta AJAX, me encontré con el problema de que me era imposible seleccionar el campo (hacer focus).

Por más que intentaba posicionarme sobre el campo (el cual, por cierto, está basado en un campo select), simplemente me era imposible hacer nada con el.

Me parecía extraño que esto solo sucediese con ese campo específico, porque en el formulario se cargan otros campo de tipo textboxtextarea, etc. Claro que los otros campos no cuentan con ningún comportamiento especial controlado vía JavaScript.

La solución

Después de investigar un buen rato sobre el elemento modal de Bootstrap, descubrí que el problema se debe a la naturaleza de este elemento, naturaleza que afecta directamente al campo que se genera vñia JavaScript, por dos razones fundamentales:

  1. Bootstrap impide que elementos fuera del cuerpo del cuadro modal puedan ser enfocados (focus).
  2. El elemento generado con JavaScript crea cierto código HTML fuera del cuerpo del modal, y lo presenta, mediante posicionamiento CSS, dentro del área del módal.

Este comportamiento de los cuadros modales de Bootstrap es controlado mediante la propiedad focusin.bs.modal, por lo tanto es aquí donde se localizaba el problema.

Buscando una solución encontré esta solución, y a partir de aquí todo fue mas simple.

Solucioné el problema agregando las siguiente dos líneas a mi fuente JavaScript:

$.fn.modal.Constructor.prototype.enforceFocus = $.noop;

$("#my-modal-id").on("shown.bs.modal", function() {
 $(document).off('focusin.bs.modal');
});

Por supuesto, este código únicamente se carga cuando se presenta el campo “problemático” y exclusivamente para el cuadro modal que lo contiene.

Acerca del autor

Eduardo Cortés

Profesor universitario, administrador de empresas, diseñador y desarrollador web apasionado por la tecnología y la literatura. Me gusta escribir solo cuando tengo algo que decir.

Nuevo comentario

Categorías

Entradas