tcrosen / twitter-bootstrap-typeahead

An extension of Twitter's Bootstrap Typeahead plugin with additional customisation.
MIT License
335 stars 161 forks source link

selecting dropdown entries by keyboard skips every second entry #17

Open rkrz opened 12 years ago

rkrz commented 12 years ago

I'm viewing the 'Twitter Bootstrap Typeahead Extension Demo' v1.2.2 form my local file system. In Firefox 14.0.1 and Opera 12.00 it is only possible to select every second entry of the search results in the dropdown. In detail:

  1. Open demo.html site
  2. Enter 'r' into the first typeahead example
  3. The list now display following hits:
  4. Toronto (selected)
  5. Montreal
  6. New York
  7. Vancouver
  8. Press arrow down key once:
  9. Toronto
  10. Montreal
  11. New York (selected)
  12. Vancouver
  13. Press arrow down key one more time:
  14. Toronto (selected)
  15. Montreal
  16. New York
  17. Vancouver

In Chrome it works as expected.

rkrz commented 12 years ago

Ok I found the issue. For whatever reason when a key is pressed firefox reports a 'keydown' and a 'keypress' event at the same time. Therefore one keypress leads to virtual to keypresses resulting in skipping every second search result.

To fix that the listen function was modified to:

listen: function () {
    this.$element.on('blur', $.proxy(this.blur, this))
                 .on('keyup', $.proxy(this.keyup, this));

    if (this.eventSupported('keydown')) {
        this.$element.on('keydown', $.proxy(this.keypress, this));
    } else {
        this.$element.on('keypress', $.proxy(this.keypress, this))
    }

    this.$menu.on('click', $.proxy(this.click, this))
              .on('mouseenter', 'li', $.proxy(this.mouseenter, this));
}
tcrosen commented 12 years ago

This is being fixed in 2.0, thanks.