If you're typing in the Chameleon Builder, and suddenly the typing disappears and you've 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 Chameleon.
Sometimes, this presents other ways like being unable to click into text fields, unable to click inside the Builder, can't enter text, text reverting, and not accepting changes that you make, etc.
In technical terms, your app likely adds a keyboard or focus 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
});
Or, like this:
document.body.addEventListener("focus", function(event){
//do something here based on what key is pressed
});
Using a global listener like this stops the Chameleon from receiving some of your key tapping, so we recommend you add a small filter to exclude the Builder from your keyboard event listeners. Below are two alternative ways to go about it.
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.
👇 The script below is an example of how your code might be changed to filter third-party apps. Do not simply copy and paste it into your app.
document.body.addEventListener("keydown focus", 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
}
});
If your users need keyboard shortcuts while are typing, you may be better off adding a filter that specifically turns off shortcuts for the Chameleon Builder. This will check whether the event happening in Chameleon, and if so, skip the listener behavior.
document.body.addEventListener("keydown focus", 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');
}
});If you can't implement the technical changes above, there are a few alternative workarounds.
Copy and paste text from a word processor into your steps. Because typing is blocked by your app, you can instead type your text in a word processor and then user your mouse to copy and paste that text into the Step.
Leave the context of the issue. Typing is often blocked when a modal or dialogue box is open in an app (specifically on apps using Bootstrap.css). If you can, try closing the modal or leaving the context where typing is blocked, edit your Step text, and then return to the modal or context to complete your step's settings.