Alert () on change event cannot be dismissed in Firefox
Dialog box alert()
in change event with jQuery cannot be closed (I click Ok but nothing happens *) in latest Firefox. In Internet Explorer, the warning appears once and can be closed.
It seems that clicking on the warning (re) triggers a change event on the input field in Firefox, but I'm not sure as the console log message is not showing.
$('input#i').on('keyup change', function(e) {
e.preventDefault();
console.log('alert ...');
alert(1); // can't be closed on Firefox
return false;
});
Full JavaScript fiddle: https://jsfiddle.net/powtac/w1md0bdd/
Tested on Firefox 52.0.1 (64-bit) on Win 7 and IE 11 on Win 7.
* = At least I cannot tell if something is happening. The popup remains in the same position. the button can be clicked, the style will change. I have tested to dismiss the warning with the keyboard (Enter) and click the OK button. Both cases did not remove the warning box.
Update:
Al.G. found a solution and explanation in this answer on StackOverflow . In short: keydown
instead of keyup
. Since this still does not explain the behavior when using the mouse, I just ran some additional tests and noticed that the warnings look different:
In my bad usecase where the popup cannot be removed it looks like this:
When using the fix by Al.G or removing one of the events that the code is listening to, it looks like this:
This could be a hint that the warning is not completely crossed out yet and another popup is showing, or something is blocking rendering.
source to share
By placing my comment as an answer:
The button is Ok
not actually disabled. You can click on it and the prompt closes, but:
-
You close the alert, so key focus returns to the previous element that held it, i.e. to the input element.
-
Immediately after that, you release the key.
Since the input element has focus, you fire an event on itkeyup
. -
The same event function
keyup
that you hooked up gets executed again. Go to step 1 :)
The way to work around this issue is to use an event that won't fire after the key is released. This is where you need keydown
.
-
As for why
console.log
it isn't printed twice:
Probably the browser just doesn't add a newline to the console, but shows a small number next to your message with the number of times the message was sent. -
To keep track of what types of events were triggered:
console.log('alert ...' + e.type + Math.random());
I added a random number so that your browser doesn't squash your messages into one. -
Why the letters do not appear in the input field using
keydown
: because youpreventDefault()
, andreturn false;
in the event. Any additional event triggers are ignored.
source to share
It seems to be some kind of bug in Firefox ...
I think you can work around the problem with this code ...
var popupOpen = false;
$('input#i').on('keyup change', function(ev) {
ev.preventDefault();
if (popupOpen == false) {
popupOpen = true;
console.log('alert ...');
alert(1); // can't be closed on Firefox
popupOpen = false;
}
return false;
});
source to share
So in FF44.0.2 it works as given. However, you might get unexpected results because you are running twice. The lock is disabled, triggering a warning. Displaying alerts removes focus from the input, which then fires a change event on the same element, re-displaying the alert. I only get twice for each keyboard, not for an infinite loop.
source to share