He estado manteniendo un pequeño proyecto escrito en React. Es una extensión del navegador que agrega soporte emoji similar a Slack a Facebook Messenger. Dado que Facebook está cambiando las cosas de vez en cuando, necesito hacer nuevos cambios en la extensión del navegador, para que funcionen como antes.

Facebook usa un <div> con el atributo contenteditable establecido en verdadero. Han hecho esto desde que tengo memoria. Sin embargo, cambiaron algo, porque solía poder hacer:

 document.querySelector("div[contenteditable=true]").addEventListener(e => { if(e.key == "Enter" && isActive) { //isActive means if the emoji picker is visible or not e.preventDefault(); e.stopPropagation(); selectEmoji(); } });

Sin embargo, ese evento ya no se activa, aunque el elemento exista. Se dispara para CADA tecla excepto Enter. Así que comencé a investigar con un MutationObserver y, para mi sorpresa, noté esto:

 removedNodes: NodeList[<div with contenteditable=true>] addedNodes: NodeList[NEW <div with contenteditable=true>]

Entonces, una vez que presiono Intro, Facebook envía el mensaje y luego reemplaza todo el elemento "chatbox" (el div con contenteditable=true) con un nuevo elemento de chatbox.

Lo que no entiendo es cómo mi addEventListener no se activa cuando presiono la tecla Intro. Incluso si hago algo como esto, no funcionará:

 setInterval(() => { var chatbox = document.querySelector("div[contenteditable=true]"); chatbox.addEventListener("keydown", () => ........ }); }, 1000);

Incluso si Facebook está eliminando el elemento, ¿no debería activarse mi evento de todos modos? Según mi prueba aquí, debería dispararse (al menos la primera vez): https://jsfiddle.net/web4dyg1/

Dado que agregar un detector de eventos y luego cancelar la solicitud de Facebook (anteriormente el envío del formulario), ya no funciona, ¿qué otras opciones tengo? Sé que esta pregunta es realmente un nicho, pero esperaba que alguien tuviera una idea innovadora.

EDITAR: necesito aclarar que agregar el detector de eventos funciona. Cada pulsación de tecla activa el evento EXCEPTO la tecla Intro.