Help with <select> box

[bakugo]

I’m currently making a website that involves using the space bar to start/stop a timer. However, I also happen to have a selection box in the corner of the screen, and when it is clicked to change, it stays highlighted, and whenever the space key / arrow keys are pressed, it cycles through the options on the menu, and ruining the software. Is there any way to keep the selection menu only accessible through the mouse and make it deselect upon selecting? https://tutuappx.com/

[lasjorg]

Disabling keyboard control would be pretty bad accessibility.

What you might do, even though that still isn’t great UX, is to call .blur() on the element after a selection has been made (with some delay).

<select id="selection">
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>

let id;
document.querySelector("#selection").addEventListener("input", ({ target }) => {
  clearTimeout(id);
  id = setTimeout(() => {
    target.blur();
  }, 2000);
});

[bbsmooth]

@lasjorg

Disabling keyboard control would be pretty bad accessibility.

Couldn’t have said it better

Also, consider that a select might not be the best element to use in this case? But it’s tough to know for sure because we can’t see your website, unless you are willing to share?