How to shift focus around list items with arrow keys, vanilla JavaScript

Question

I am creating a small toDo app, and i want my users to be able to search through toDo items with arrow keys: ToDo app and list i would like to go through with arrows in upper right corner.

My code works but not as i intended, as it jumps through list items in some random way, but I don't understand why is it happening.

<div class="col-md-6 align-self-center">
                    <input type="text" class="form-control" id="filter" placeholder="Search Items...">               
                        <ul id="filter-ul">
                        </ul>
                </div>

Here's my html code in question, just an input text field for my search query and ul under it. But i think that there is a problem in my JS code:

let filter = document.getElementById("filter");
filter.addEventListener("keyup", navigateThroughList);

function navigateThroughList() {
  let firstItem = filterList.firstElementChild;
  // firstItem.focus();

  document.addEventListener("keydown", function(e) {
    switch (e.key) {
      case "ArrowUp":
        if (document.activeElement == (filter || firstItem)) {
          filterList.lastElementChild.focus();
        } else {
          document.activeElement.previousSibling.focus();
        }
        break;


      case "ArrowDown":
        if (document.activeElement == filter) {
          firstItem.focus();
        } else {
          if(document.activeElement.nextSibling==null){
            firstItem.focus();
          }
          document.activeElement.nextSibling.focus();
        }
        break;
    }
  });
}

As I understood from couple of my errors, it has something to do with my input field not having sibling elements, but i protected myself from it with conditions in if{} brackets, or so I taught: error in question

It's driving me mad, because everything looks good logically, I'm missing something obvious probably as I am new to JavaScript. Any help is greatly appreciated. Thanks in advance!!