The previous focus change that was applied to dialog close has unexpected behavior for non-modal dialogs

[sirisian]

This change: #6531

See this for an example: https://jsfiddle.net/sirisian/9f7t5pbm/1/

Source

<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">

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 });

I have multiple use cases with dialog show() where I get unexpected blur events because of this behavior. I'm required to unregister blur events before I call close and then reregister them afterwards. I'd argue that showing a dialog and allowing the user to change focus is the whole idea with a non-modal dialog. So having it revert to the previous focus that happened to be selected when the dialog was shown is not what's intended.

[domenic]

cc @josepharhar @nt1m @sefeng211

[sefeng211]

Yeah I agree, this is annoying.

I think for non-modal dialog case, the previous focused element should be latest focused element that is not a descendent of the dialog. I think this can fix this?

[josepharhar]

I think for non-modal dialog case, the previous focused element should be latest focused element that is not a descendent of the dialog. I think this can fix this?

The inputs in the jsfiddle aren't descendants of the dialog though are they?

[sefeng211]

Yeah, so the previous focused element should be the left input which is not a descendent of the dialog. So dialog.close() won't move the focus to the right input.

[josepharhar]

I opened a PR for this: #9178
It does the same thing as this PR for popovers: #9018