Wrong mouseenter event on Firefox

Question

I have an input inside div element. The input is hidden by default and should be visible when mouse will be over container. Upon any keydown event the input should be hidden. Obviously user have to click on input field to entry text.

Here is my plnkr

 var container = $('#container');
 var flicker = $('#flicker').hide();
  var log = $('#log');
  container.on('mouseenter', function() {
    flicker.show();
    log.prepend('<div>mouseenter</div>');
  });
  flicker.on('keydown', function() {
    flicker.hide();
    setTimeout(function() {
      flicker.show();
    }, 4000);
  })

It works perfectly on Chrome, but fails on Firefox (OS x). On Firefox the input field doesn't disappeared, and works undesirable.

Any suggestion?

The input won't receive any key events if it doesn't have focus. — nnnnnn, Oct 28 '16 at 03:08
Nope. I can't access that site from here. Perhaps you could [edit] your question to directly include a [runnable code snippet](https://stackoverflow.blog/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). — nnnnnn, Oct 28 '16 at 03:20
Sorry makes no sense. Why using the `flicker.on('keydown', function() {` at all!! — Roko C. Buljan, Oct 28 '16 at 03:43

score 0 · Accepted Answer · edited May 23 '17 at 12:33

It seems to be a firefox bug.

I figured out the way. It's quite simple. Just use visibility: hidden instead of display: none. Say use flicker.addClass('hidden') instead of flicker.hide() or something like this.

The another approach is to off mouseenter event after flicker.hide() and enable again after 150ms. But it looks a bit ugly because of setTimeout.

The css example.

The css approach works nicely in firefox, chrome, safari, opera. But be aware of the difference between display: none and visibility: hidden.

Wrong mouseenter event on Firefox

1 Answers1