CODEWITHSUNDEEP
javascripthtmldom-events
PierreD
PierreD

Reputation: 963

How to make event listeners works when <select> is trigerred?

I wanna handle keydown event when I am choosing an option.

document.addEventListener('keydown', () => {
  console.log('keydown');
});
div {
  padding: 40px;
  border: 2px solid red;
}
<div>
  <p>keydown should works anywhere.</p>
  <p>Open the select below and try to keypress, event listener is like deactivated.</p>
  <select>
    <option>foo</option>
    <option>bar</option>
  </select>
</div>

Is there a way to make it works ?

Upvotes: 0

Views: 58

Answers (2)

DCR
DCR

Reputation: 15700

your keydown event is working as intended. Click on the document and then press any ASCII key - say any letter and you will see the conse.log(). To get what you might be looking for change keydown to a click event

document.addEventListener('keydown', () => {
  console.log('keydown');
});

function myFunction(){
console.log('select')
}
div {
  padding: 40px;
  border: 2px solid red;
}
<div>
  <p>keydown should works anywhere.</p>
  <p>Open the select below and try to keypress, event listener is like deactivated.</p>
  <select onclick='myFunction()'>
    <option>foo</option>
    <option>bar</option>
  </select>
</div>

Upvotes: 0

Eduardo Po&#231;o
Eduardo Po&#231;o

Reputation: 3089

The keydown event, when the select is open, is used to select options starting with that letter.

If you want to append keydown events, you will have to make a custom element that resembles a select element with options.

Link to implementation:

https://andrejgajdos.com/custom-select-dropdown/

Upvotes: 1

Related Questions