JSFiddle - React, Tailwind, and code Playground

by Ibrahim Tanyalcin

HTML

<textarea id="some" contenteditable="true"></textarea>
<div id="some2" style="background:red;width:50px;height:50px"></div>

JavaScript

!function(){
	//set a variable to listen to
  var blur = true;
  //your original keydown
  document.getElementById("some").addEventListener("keydown",function(e){
    if(e.which === 13){
      e.currentTarget.blur();
      console.log("entered");
    }
  },false);
	//add a blur listener to modify, e.preventDefault won't work
  document.getElementById("some").addEventListener("blur",function(e){
      //decide what to do based on this variable
      if(!blur){
        e.currentTarget.focus();
      }
  },false);
  //listen globally to click events, and set blur variable based on a condiditon
  window.addEventListener("mousedown",function(e){
    if(!document.activeElement){return};
    //a condition, if we are on red square, blur won't take place
    if(
        document.elementFromPoint(e.clientX,e.clientY) === 				                   document.getElementById("some2")
    ){
        blur = false;
    } else {
        blur = true;
     }
  },false);
}()