CODEWITHSUNDEEP
javascriptjqueryfirefoxevent-handlingalert
powtac
powtac

Reputation: 41050

alert() in on change event can not be dismissed on Firefox

An alert() dialog in an on change event with jQuery can't be closed (I click "Ok" but nothing happens*) on the latest Firefox. On Internet Explorer the alert shows up one time and can be closed.

It seems that clicking the alert (re)triggers a change event in the input field on Firefox but I'm not sure, since the console log message does not show up.

$('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 can not tell if something happens. The popup stays at the same position. the button can be clicked, it's style changes. I tested to dismiss the alert with keyboard (Enter) and mouse clicking the "Ok". Both cases did not remove the alert window.

Update:

Al.G. in this answer https://stackoverflow.com/a/43052301/22470 found a solution and explanation. In short: keydown instead keyup. Since this still does not explain the behavior when using mouse only I did some further tests and noticed that the alerts look different:

In my bad usecase where the popup can not be removed it looks like:

bad alert

When using the fix by Al.G, or removing one of the events the code is listening to it looks like:

enter image description here

This might be a hint that the alert is not yet fully drawn and showing already another popup or something is blocking rendering.

Upvotes: 3

Views: 1234

Answers (3)

Al.G.
Al.G.

Reputation: 4387

Putting my comment as an answer:

Actually the Ok button is not disabled. You can click it and the prompt does get closed, but:

  • You close the alert, so the key focus goes back to the previous element which held it - i.e. the input element.

  • Right after that, you release the key.
    Since the input element has the focus, you trigger a keyup event on it.

  • That same keyup event function you attached gets executet again. Go to step 1 :)

A way to solve this is to use an event which won't be triggered after a key is release. What you need here is keydown.

  • As for why the console.log is not printed twice:
    it probably is, just the browser does not add a new line in the console but shows a tiny number next to your message with the number of times the message was sent.

  • To track what types of events got triggered: console.log('alert ...' + e.type + Math.random());
    I added a random number so that your browser does not squash your messages into one.

  • Why the letters do not appear in the input box when using keydown: because you preventDefault() and return false; on the event. Any further event triggers are ignored.

Upvotes: 3

bastos.sergio
bastos.sergio

Reputation: 6764

Seems to be some sort of Firefox bug...

I guess you can workaround the issue 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;
});

Upvotes: 1

Snowmonkey
Snowmonkey

Reputation: 3761

So, in FF44.0.2, it works as given. However, you may be getting some unexpected results because you're triggering twice. The keyup goes off, popping up the alert. The alert displaying removes focus from the input, which then triggers the change event on that same element, redisplaying the alert. I'm only getting it twice for each keyup, not an infinite loop.

Upvotes: 0

Related Questions