JSFiddle - React, Tailwind, and code Playground

by sirisian

HTML

<p>
Click on the right input, then the left, then wait.
</p>
<ul>
  <li>Clicking on the right sets the previous focus</li>
  <li>Pointerdown on the left shows the dialog remembering the previous focus was the right</li>
  <li>5 seconds pass, then the close reverts the focus. Unexpected, and annoying when using blur events.</li>
</ul>
<input id="left" type="text"><dialog id="dialog"><p>test</p></dialog>
<input id="right" tabIndex="0" type="text">

JavaScript

const $left = document.getElementById('left');
const $right = document.getElementById('right');
const $dialog = document.getElementById('dialog');

$left.addEventListener('focus', e => {
  console.log('focus left');
});
$left.addEventListener('blur', e => {
  console.log('blur left');
});

$right.addEventListener('focus', e => {
	console.log('focus right');
});
$right.addEventListener('blur', e => {
	console.log('blur right');
});

$left.addEventListener('pointerdown', async e => {
	console.log('show');
  $dialog.show();
  setTimeout(() => {
    console.log('close');
    $dialog.close();
  }, 5000);
}, { once: true });