Get full focus on a element when it is visible

Question

I have a drop-down button is there any way to bind the keyboard events when the up / down arrow key is pressed on the keyboard only when the drop-down is visible.

I have seen in few web pages people getting complete focus on a pop-up modal. I am toggling a class to check if the drop-down is visible or not. But I don't have any idea to bind with the keyboard keys like enter key to select a li. or use the up / down key to move over the list items that are visible.

Is this possible to achieve?

$(".btn").on('click', function(e) {
  e.stopPropagation();
  var $dropdown = $(this).siblings().fadeToggle().toggleClass('visible');
  $('.dropdown .btn-dropdown').not($dropdown).fadeOut();
});

$(document).on('click', function(e) {
  $('.dropdown .btn-dropdown').fadeOut();
});

.btn {
  outline: none;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  background-color: #eee;
  color: #7b7b7b;
  width: 150px;
  box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, .16);
  font-weight: bold;
  margin-bottom: 20px;
}

.dropdown {
  position: relative;
  display: inline;
}

.btn-dropdown {
  padding: 0px;
  margin: 0px;
  list-style: none;
  background-color: #fff;
  position: absolute;
  left: 0px;
  top: 30px;
  box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, .16);
  min-width: 200px;
  border: 1px solid #ddd;
  text-align: initial;
  max-height: 210px;
  overflow: auto;
  display: none;
  z-index: 100;
}

.btn-dropdown li {
  padding: 6px;
  margin: 0px;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}

.btn-dropdown li:hover {
  background-color: #ddd;
}

.btn-dropdown li:last-child {
  border-bottom: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="btn first">Select something</button>
  <ul class="btn-dropdown">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
  </ul>
</div>

Answer 1

You can try something like this:

$(document).on("keyup", function(e) {
  var l = $('.btn-dropdown');
  if ($('.btn-dropdown:visible').length && e.keyCode == 38) {
    if ($(l).find(".selected").length == 0) {
      $(l).find("li:last").addClass("selected")
    } else {
      $(l).find("li.selected").removeClass("selected").prev().addClass("selected")
    }
  } else if ($('.btn-dropdown:visible').length && e.keyCode == 40) {

    if ($(l).find(".selected").length == 0) {
      $(l).find("li:first").addClass("selected")
    } else {
      $(l).find("li.selected").removeClass("selected").next().addClass("selected")
    }

  }
})

$('.btn-dropdown:visible').length && e.keyCode == 38 will check if the "dropdown" is visible and if you clicked on up key

Working demo

$(".btn").on('click', function(e) {
  e.stopPropagation();
  var $dropdown = $(this).siblings().fadeToggle().toggleClass('visible');
  $('.dropdown .btn-dropdown').not($dropdown).fadeOut();
});

window.addEventListener("keydown", function(e) {
    // space and arrow keys
    if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1 && $('.btn-dropdown:visible')) {
        e.preventDefault();
    }
}, false);

$(document).on("keyup", function(e) {
  var l = $('.btn-dropdown');
  if ($('.btn-dropdown:visible').length && e.keyCode == 38) {
    if ($(l).find(".selected").length == 0) {
      $(l).find("li:last").addClass("selected")
    } else {
      $(l).find("li.selected").removeClass("selected").prev().addClass("selected")
    }
  } else if ($('.btn-dropdown:visible').length && e.keyCode == 40) {

    if ($(l).find(".selected").length == 0) {
      $(l).find("li:first").addClass("selected")
    } else {
      $(l).find("li.selected").removeClass("selected").next().addClass("selected")
    }

  }
})

$(document).on('click', function(e) {
  $('.dropdown .btn-dropdown').fadeOut();
});

.btn {
  outline: none;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  background-color: #eee;
  color: #7b7b7b;
  width: 150px;
  box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, .16);
  font-weight: bold;
  margin-bottom: 20px;
}

.dropdown {
  position: relative;
  display: inline;
}

.btn-dropdown {
  padding: 0px;
  margin: 0px;
  list-style: none;
  background-color: #fff;
  position: absolute;
  left: 0px;
  top: 30px;
  box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, .16);
  min-width: 200px;
  border: 1px solid #ddd;
  text-align: initial;
  max-height: 210px;
  overflow: auto;
  display: none;
  z-index: 100;
}

.btn-dropdown li {
  padding: 6px;
  margin: 0px;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}

.btn-dropdown li:hover,
.btn-dropdown li.selected {
  background-color: #ddd;
}

.btn-dropdown li:last-child {
  border-bottom: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="btn first">Select something</button>
  <ul class="btn-dropdown">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
  </ul>
</div>