If you're typing in the Chameleon Editor, and suddenly the typing caret disappears and you're whisked away to something in your app, then there's a good chance you have a keyboard shortcut built into your app that conflicts with the Editor.

The issue

In technical terms, your app likely adds a keyboard event listener to the body element of your app, that collects and watches for any and all keyboard button presses. That looks something like this:

document.body.addEventListener("keydown", function(event){
  //do something here based on what key is pressed
});

Using a global listener like this stops the Chameleon Sidebar receiving some of your key tapping, so we recommend you add a small filter to exclude the Editor from your keyboard event listeners. Below are two alternative ways to go about it.

Add a filter for inputs, textareas, and contentEditable elements

This is the most general update you can make, and may even help your app work more smoothly with other plugins similar to Chameleon. It looks for if any input elements are currently selected, and if so, it bypasses the keyboard listener behavior.

document.body.addEventListener("keydown", function(event){
  var tagName = document.activeElement.tagName,
      contentEditable = document.activeElement.getAttribute('contentEditable');

  if(tagName !== \"INPUT\" && tagName !== \"TEXTAREA\" && !contentEditable){
      //do something here based on what key is pressed
  }
});

Add a filter for the Editor

Maybe your users need keyboard shortcuts while are typing, you may be better off adding a filter that specifically turns off shortcuts for the Chameleon Editor. This will check whether the event happening in Chameleon, and if so, skip the listener behavior.

document.body.addEventListener("keydown", function(event){
  var isChmln = function(element) {
    if (element.id && element.id == 'chmln-dom') return true;
    return element.parentNode && isChmln(element.parentNode);
  }
  if(event && event.target && !isChmln(event.target)){
      //do something here based on what key is pressed
    console.log('not Chmln');
  }
});
Did this answer your question?