I ran into a small but frustrating issue with Google Chrome when dismissing a modal type dialog( alert in this instance but prompt exhibits the same behaviour. ) Usually one expects that the Esc will cancel / close things - on the web it commonly will close a popup ( such as those described ) and indeed that is the case. The problem I have witnessed revolves around the fact that once the dialog is dismissed/closed the elements on the page become unresponsive to certain actions.
One article I read seemed to offer a glimpse of what might be happening with Google continually fighting spam of one sort or another but this does not seem to fully fit the facts.
Even using focus() after the alert offers no solution - is this a fault in the javascript logic here, my understanding or a special feature I was not aware of? I looked over serveral of the possible duplicates whilst writing the question - none seemed to fit.
A very simple example below.
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Using the `Esc` key to dismiss modal type dialogs</title>
</head>
<body>
<form name='emulator' method='post'>
<input type='text' name='message' value='banana' />
<input type='button' name='bttn' value='Submit' />
</form>
<!--
Two browsers to test: Chrome & Firefox
In Chrome(Version 84.0.4147.135) a bug seems to prevent normal page operation
if the `Esc` key is pressed to dismiss the alert prompt. Clicking the button on
the `alert` does not yield the same error/problem however and this is not an
issue in FF.
There IS page interaction required before the bug/undocumented feature becomes
apparent so it seems that the new features designed by google to fight `popup spam`
( https://www.zdnet.com/article/google-changes-how-the-escape-key-is-handled-in-chrome-to-fight-popup-ads/ )
is not relevant.
In Firefox using the `Esc` key no adverse effects are observed and it
behaves as one might expect.
-->
<script>
const args={ 'bubbles':true, 'cancelable':true };
const evt=new Event('click',args);
const form=document.forms.emulator;
const bttn=form.bttn;
const input=form.message;
/* listen for keypress events and respond with custom event for `enter` key press */
form.addEventListener('keypress',(e)=>{
if( e.key === 'Enter' ){
e.preventDefault();
bttn.dispatchEvent(evt);
}
});
/* display a modal type dialog in response to triggered event */
bttn.addEventListener( 'click', (e) => alert( input.value ) );
/*
alternate version - same result
bttn.addEventListener( 'click', (e) => { alert( input.value ); input.focus(); } );
*/
</script>
<h2>Process to test/duplicate:</h2>
<ol>
<li>Open page in Chrome and Firefox</li>
<li>Click into the text field to give focus - add some text. ( this stage optional )</li>
<li>Hit `Enter` on keyboard OR press `Submit` button. An alert will appear displaying the contents of the text field</li>
<li>Hit `Esc` on keyboard to dismiss the alert. The alert will disappear.</li>
<li>Click into the textfield again and type - in Chrome focus will not return and button will not respond. In Firefox all OK.</li>
</ol>
</body>
</html>