Search code examples
javascriptcontenteditabledom-events

Unexpected Mutation Observer behavior

I have an issue working with contenteditable="true".

Basically what I have is mutation observer with all options set to true.

function callback() {
  console.log("callback");
}
let myInput = document.getElementById("myInput");
myInput.focus();

let config/*: MutationObserverInit*/ = {
  attributes: true,
  characterData: true,
  childList: true,
  subtree: true,
  attributeOldValue: true,
  characterDataOldValue: true
};

let mutationObserver = new MutationObserver(callback);

mutationObserver.observe(myInput, config);
#myInput {
  border: 1px solid #ddd;
}
<div contenteditable id="myInput">

So I can handle typing, deleting part of text inside my div.

But when I try to remove all text event does not fire.

What can be wrong?

Solution

  • Issue was related to different code block. All types except characterData was filter out. I didn't notice that.