JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Try to select me</h2>

<div id="foo">dljafdlhjafdbdfasjhadsfh adfsjlfhads h jkfkaj fjf ajksfhajks afjk sdhfkj asfadks jfsdjf kjasdhf kjasdh fkjasdfk jadskjfhakdsjf kajsdf kjah kfjas kdjfads</div>

<div id="clickme">
  Click Me To Reset
</div>

CSS

#clickme {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #dcdcdc;
  display: inline-block;
  cursor: pointer;
}

#clickme:hover {
  background: #dcdcdc;
}

JavaScript

var allowFocus = function() {
	var oldEl = document.getElementById('foo');
	var newEl = oldEl.cloneNode(true);
	oldEl.parentNode.replaceChild(newEl, oldEl);
}


document.getElementById('foo').onmousemove = function() {
  unFocus()
}

document.getElementById('foo').onmouseup = function() {
  unFocus()
}

document.getElementById('clickme').onclick = function() {
  allowFocus();
}