JSFiddle - React, Tailwind, and code Playground

HTML

<div tabindex="-1" contenteditable="true" #projectName class="project-name-data">This is test</div>

CSS

.project-name-data{
  max-width:180px;
  white-space: nowrap;
   overflow-x: hidden;
}

JavaScript

document.getElementsByClassName("project-name-data")[0].addEventListener("focusout",function(){
this.style.backgroundColor = "red";

   var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(this,0);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);

});