Problema con inputs en modales de Bootstrap y SweetAlert

Prop Jason Seguir

Beta
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
26 Jun 2023
Mensajes
71
Estoy desarrollando una aplicación con symofny 5 para un restaurante, hay un apartado que cuando hago click a una mesa aparece un modal de Bootstrap grande donde se puede tomar nota etc, en este modal arriba hay un input de comensales que es donde podemos poner el numero de comensales, pues bien dentro de este modal hay diferentes botones que abren un segundo modal ya sea para tomar nota, cobrar etc, en estos segundos modales que suelen ser swals , hay inputs para escribir o poner numero, hasta aquí bien, que pasa, que cuando se abre algunos de estos segundos modales que contienen inputs no me deja escribir porque el foco se va al modal de comensales del primer modal de bootstrap y no entiendo porque pasa esto.
 

BotBeta

Admin
Sigma
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Suscripción a IA
Desde
13 Jun 2020
Mensajes
34.098
Este problema es causado por la forma en que Bootstrap maneja los modales. Cuando cierras el segundo modal, Bootstrap reasigna el foco al primer modal y por consiguiente, al input de comensales.

Una posible solución a esto puede ser utilizando jQuery para reasignar el foco al segundo modal cuando se abre. Algo como esto:

JavaScript:
$('#segundoModal').on('shown.bs.modal', function () {
  $('#miInput').focus();
})

Aquí '#segundoModal' sería el id de tu segundo modal y '#miInput' el id del input que quieres que mantenga el foco.
 

Prop Jason

Beta
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
26 Jun 2023
Mensajes
71
Este problema es causado por la forma en que Bootstrap maneja los modales. Cuando cierras el segundo modal, Bootstrap reasigna el foco al primer modal y por consiguiente, al input de comensales.

Una posible solución a esto puede ser utilizando jQuery para reasignar el foco al segundo modal cuando se abre. Algo como esto:

JavaScript:
$('#segundoModal').on('shown.bs.modal', function () {
  $('#miInput').focus();
})

Aquí '#segundoModal' sería el id de tu segundo modal y '#miInput' el id del input que quieres que mantenga el foco.
Los segundos modales son de SweetAlert
 

BotBeta

Admin
Sigma
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Suscripción a IA
Desde
13 Jun 2020
Mensajes
34.098
Los segundos modales son de SweetAlert
Entendido. En caso de SweetAlert, normalmente el foco debería funcionar correctamente. Sin embargo, hay ocasiones donde puede surgir conflictos cuando se utiliza junto con modales de Bootstrap debido a discrepancias en el manejo de foco.

Puedes intentar resolver esto asegurándote que al abrir una alerta de SweetAlert, el primer modal pierda su foco. Un ejemplo de cómo se podría hacer esto:

JavaScript:
Swal.fire({
   //Opciones de tu SweetAlert
  ...
}).then((result) => {
  //Desenfocamos los inputs del primer modal
  $('#primerModal').find(':input').blur();
});

Lo que hace es desenfocar los inputs del primer modal después de abrir SweetAlert.
 

Prop Jason

Beta
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
26 Jun 2023
Mensajes
71
Entendido. En caso de SweetAlert, normalmente el foco debería funcionar correctamente. Sin embargo, hay ocasiones donde puede surgir conflictos cuando se utiliza junto con modales de Bootstrap debido a discrepancias en el manejo de foco.

Puedes intentar resolver esto asegurándote que al abrir una alerta de SweetAlert, el primer modal pierda su foco. Un ejemplo de cómo se podría hacer esto:

JavaScript:
Swal.fire({
   //Opciones de tu SweetAlert
  ...
}).then((result) => {
  //Desenfocamos los inputs del primer modal
  $('#primerModal').find(':input').blur();
});

Lo que hace es desenfocar los inputs del primer modal después de abrir SweetAlert.
Es que técnicamente por lo que veo ese input del primer modal no esta focus pero se me va ahí el foco, no lo entiendo..
 

BotBeta

Admin
Sigma
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Suscripción a IA
Desde
13 Jun 2020
Mensajes
34.098
Es que técnicamente por lo que veo ese input del primer modal no esta focus pero se me va ahí el foco, no lo entiendo..
Eso suena como un comportamiento inusual. Podría ser un bug específico en la interacción entre Bootstrap y SweetAlert. Te recomendaría probar con una versión diferente de Bootstrap o SweetAlert para ver si el problema persiste. También puede ser útil revisar si hay algún código de JavaScript o jQuery personalizado que pueda estar causando este comportamiento.
 

abel1991

Gamma
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
31 Jul 2023
Mensajes
163
Estoy desarrollando una aplicación con symofny 5 para un restaurante, hay un apartado que cuando hago click a una mesa aparece un modal de Bootstrap grande donde se puede tomar nota etc, en este modal arriba hay un input de comensales que es donde podemos poner el numero de comensales, pues bien dentro de este modal hay diferentes botones que abren un segundo modal ya sea para tomar nota, cobrar etc, en estos segundos modales que suelen ser swals , hay inputs para escribir o poner numero, hasta aquí bien, que pasa, que cuando se abre algunos de estos segundos modales que contienen inputs no me deja escribir porque el foco se va al modal de comensales del primer modal de bootstrap y no entiendo porque pasa esto.
Sin ver parte del código al menos de ese apartado es muy complicado darte ayuda o una solución, pero intenta revisar las mayúsculas, es muy común tener esos errores al subirlo a producción y en la mayoría de casos que reviso son por ese motivo.
 

Ch0nGu1

Beta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
16 Jul 2023
Mensajes
48
el focus es definido en el form de los inputs.
 
Arriba