Keyup Event Missed If Clicking On Select(Dropdown)

Question

I have a page where when a user holds down a key, in my case [Ctrl], they are able to interact with page elements in specific ways. Once they release the key, and the keyup event fires, I reset some flags. I found though that when I click on a select dropdown while holding the key down, the keyup event is never caught. I created a quick Pen to demonstrate this issue. I have no idea if perhaps it's a scope issue. Currently I'm using jQuery to listen like $(document).on('keyup',(e)=>{}) but maybe the select has a different scope? I've tried a few but couldn't find one that worked.

https://codepen.io/srm985/pen/LmPvdO

$(document).on("keydown", e => {
  if (e.keyCode == "17") {
    $("span").text("true");
  }
});

$(document).on("keyup", e => {
  if (e.keyCode == "17") {
    $("span").text("false");
  }
});

select {
  width: 250px;
  height: 35px;
}

span {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Press and hold [Ctrl]. While holding [Ctrl], click on select. The keyup event is never captured.</p>
<p>Key Down: <span>false</span></p>
<select>
  <option>test1</option>
  <option>test2</option>
</select>

This is an interesting one. I tried changing the selector to `window` and `'*'`, same behavior. — Taplar, Apr 17 '18 at 22:15
I am not huge on workarounds, but I think this behavior has to do with the `select box` itself --- You may have to recreate the select box with `divs` `ul` `li` etc etc .. This is an interesting problem. — Zak, Apr 17 '18 at 22:17
Possible duplicate of [jQuery keypress/keyup/etc events not fired when select box is expanded](https://stackoverflow.com/questions/8648990/jquery-keypress-keyup-etc-events-not-fired-when-select-box-is-expanded) — Taplar, Apr 17 '18 at 22:20
this is a known bug, currently no solution other than to emulate a select using other html elements: https://bugs.chromium.org/p/chromium/issues/detail?id=336710 — dave, Apr 17 '18 at 22:31

score 3 · Accepted Answer · answered Apr 17 '18 at 22:34

This is a known bug in chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=336710

Currently, the only realistic solution would be to either give your select a size attribute > 1 (which makes it not a dropdown, but a list), or to emulate the select using something like https://select2.org/.

Keyup Event Missed If Clicking On Select(Dropdown)

1 Answers1