CODEWITHSUNDEEP
javascriptjqueryhtml
Sean
Sean

Reputation: 313

Keyup Event Missed If Clicking On Select(Dropdown)

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>

Upvotes: 5

Views: 405

Answers (1)

dave
dave

Reputation: 64695

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/.

Upvotes: 3

Related Questions