Tengo un modal con la propiedad tabIndex especificada (para que sea capaz de recibir foco) y dentro de ese modal tengo un input (que por defecto recibe foco). Al dar click afuera del modal, se dispara un evento onblur asociado que lo elimina (hasta aquí todo bien), pero también se dispara al enfocar el input que está dentro del modal (lógico que pase). Mi objetivo es evitar ese comportamiento.
Pudiera simplemente colocar el modal dentro de un div padre con position:absolute e inset:0px, pero mi objetivo es que lo que está detrás del modal sea interactuable. Y si le pongo pointer-events:none a ese div padre sería como si no existiera. Para eso tengo otra función que me genera un modal con un div padre con backdrop-filter:blur(10px) para que resalte el modal.
Aquí tengo algo de código:
const Modal = CrearModalSinDivPadre ('Título') //Función predefinida.
Modal.tabIndex = 0
Modal.addEventListener ('blur', () => Modal.remove ()) //Funcion flecha para escribir menos, aunque no sirve this, pero no importa :-)
const Input = Modal.CrearElemento ({ tagName: 'input' }) //Otra función predefinida que me genera un input.