JSFiddle - React, Tailwind, and code Playground

by reesewill

HTML

<div tabindex="0">
    
</div>
<div tabindex="0">

</div>
<button href="#">
click
</button>

CSS

div {
  background-color: red;
  height: 100px;
  width: 100px;
}
div {
  
}

JavaScript

var div =	document.querySelector('div');
document.querySelector('button').addEventListener('click', function() {
	div.style.backgroundColor = 'blue';
  div.style.pointerEvents = 'none';
});
document.querySelectorAll('button', '[tabindex]').forEach(function(el) {
	el.addEventListener('focus', function(e) {
  	debugger;
    if (document.activeElement !== div) {
      div.focus();
    }
  })
  });