Bootstrap Modals: imposible hacer focus en campo de formulario

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

Developer y Project Manager con 20 años de experiencia en desarrollo web, frontend y backend.

Por Eduardo Cortés

Categorías

Instagram

Twitter

Alerta Amber Yucatán continúa solicitando su apoyo y #RT para la búsqueda y localización de la adolescente SELMY MELISSA NAH PÉREZ de 13 años en el Estado de Yucatán. ¡Ayúdanos a localizarla! @fgeyucatan

John Ackerman es integrante del Instituto de formación política de Morena, por eso NO reúne requisitos para ser parte del Comité evaluador para consejeros del @INEMexico. No es imparcial.

Es muy importante su rt. Evitemos consumar el color contra el INE.

Para que se alegren el día, les dejo la cara más tierna del beisbol ⚾🙈