CODEWITHSUNDEEP
javascripthtmldrop-down-menufocustabindex
Scindix
Scindix

Reputation: 1304

Make select element truly unfocusable

I have been trying to make a select element unfocusable. Multiple sources suggest to set the tabIndex to -1. That is what I have attempt, but it failed.

Consider the following example:

function addEv(id, event, message)
{
  document.getElementById(id).addEventListener(event, function(){
    document.getElementById('console').innerHTML = message;
  });
}
addEv('select', 'focus', 'select focus');
addEv('select', 'blur', 'select blur');

addEv('span', 'focus', 'span focus');
addEv('span', 'blur', 'span blur');

addEv('select-wrapper', 'focus', 'div focus');
addEv('select-wrapper', 'blur', 'div blur');
#select-wrapper {
  display: inline-block;
  padding: 1px;
  border: 1px solid transparent;
}
#select-wrapper:focus {
  border: 1px solid;
  border-radius: 5px;
  outline: none;
}
<input type="text" value="3 glasses">
<div id="select-wrapper" tabindex="0">
  <span id="span">of</span>
  <select id="select" tabindex="-1">
    <option value="beer">Beer</option>
    <option value="wine" selected>Wine</option>
    <option value="vodka">Vodka</option>
  </select>
</div>
<input type="button" value="drink">
<div id="console"></div><br>

If you tab through the elements everything works as expected. The two input elements and the div element get focused. Same goes for clicking on the span that says "of". However if you click on the select element it gets focused instead of the div. This means that the wrong focus events become fired and the select element's visuals change just as it was focused. This is consistent among Firefox and Chrome so I assume that this is intentional.

The question is: How can I make the select element unfocusable and make the div surrounding it focusable instead? And of course I still want to be able to open the dropdown and select an option.

Upvotes: 2

Views: 2907

Answers (2)

israel
israel

Reputation: 181

In addition to the tabindex = -1, you can add this to the CSS property.

  pointer-events: none;

This worked for me

Upvotes: 2

Scindix
Scindix

Reputation: 1304

EDIT: This method stopped working in Firefox 52 or some earlier version

I have found a dirty solution on my own. If I ignore the fact that the select element still fires focus and blur events I could make it look like the div element becomes focused by performing select.blur() and div.focus() when the select element gets focused. See the code below.

Notice: If you are going to use my solution please don't forget to implement accessibility features manually since they won't work anymore as @nnnnnn pointed out.

function addEv(id, event, message)
{
	document.getElementById(id).addEventListener(event, function(){
    document.getElementById('console').innerHTML += message+"<br>";
  });
}
addEv('select', 'focus', 'select focus');
addEv('select', 'blur', 'select blur');

addEv('span', 'focus', 'span focus');
addEv('span', 'blur', 'span blur');

addEv('select-wrapper', 'focus', 'div focus');
addEv('select-wrapper', 'blur', 'div blur');

document.getElementById('select').addEventListener('focus', function(){
	document.getElementById('select').blur();
  document.getElementById('select-wrapper').focus();
});
#select-wrapper {
  display: inline-block;
  padding: 1px;
  border: 1px solid transparent;
}
#select-wrapper:focus {
  border: 1px solid;
  border-radius: 5px;
  outline: none;
}
<input type="text" value="3 glasses">
<div id="select-wrapper" tabindex="0">
  <span id="span">of</span>
  <select id="select" tabindex="-1">
    <option value="beer">Beer</option>
    <option value="wine" selected>Wine</option>
    <option value="vodka">Vodka</option>
  </select>
</div>
<input type="button" value="drink">
<div id="console"></div><br>

Upvotes: 0

Related Questions