JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
</head>
<body>
<div id="foo">
I am a div that you can click!
</div>

<button id="foo-button" onClick="soRedirect()">
And I am a special button-div that you can click!
</button>

</body>
</html>

CSS

#foo {
  border: 4px solid black;
  padding: 10px;
  cursor: pointer;
}

#foo-button {
  color: white;
  font-weight: bold;
  padding: 10px;
  margin: 10px;
  cursor: pointer;
  background: blue;
  border-radius: 25px;
}

JavaScript

let fooDiv = document.querySelector('#foo');

function soRedirect() {
window.open('https://stackoverflow.com/questions/68896391/programatically-triggering-click-event-does-not-obey-objects-target-blank', '_blank');
}

fooDiv.addEventListener('click', soRedirect);

////////////////////////////////////////////////////////////////////
// Uncomment this to enable auto click the button after 2.5 seconds!
//
// new Promise(res => setTimeout(res, 2500)).then(() => document.querySelector('#foo').click());