Как в данном примере отменить действия браузера по умолчанию при использовании стрелок вверх/вниз?

let input = document.querySelector('.input'),
  variants = document.querySelector('.variantsDiv'),
  wordsObject = {
    'a': ['amy', 'any', 'aky', 'ammy', 'aby', 'aty', 'azy', 'ally', 'aly'],
    'b': ['boy', 'boom', 'by', 'burn', 'build', 'back', 'background', 'boo'],
    'p': ['pick', 'pook']
  };


let varMod = (function() {

  /////////////////////////// (1) ///////////////////////////
  function createSpanItems(input, variantsBlock, objOfWords) {
    let val = input.value.toLowerCase(),
      firstLetter = val.slice(0, 1).toLowerCase(),
      curArray,
      variants = [];

    if (objOfWords[firstLetter]) {
      curArray = objOfWords[firstLetter];
    } else {
      return;
    };

    for (let k = 0; k < curArray.length; k++) {

      if (curArray[k].indexOf(val) !== -1) {
        variants.push(curArray[k]);
      };
    };

    if (!variants.length) {
      variantsBlock.style.opacity = 0;
      return;
    }

    varMod.clearVars(variantsBlock);

    for (let k = 0; k < variants.length; k++) {
      let itemSpan = document.createElement('span');
      itemSpan.textContent = variants[k];
      itemSpan.setAttribute('value', variants[k]);
      itemSpan.classList.add('varianItem');
      if (k == 0) itemSpan.classList.add('active');
      
      variantsBlock.appendChild(itemSpan);

      itemSpan.innerHTML = itemSpan.textContent.replace(
        val,
        (m) => {
          return `<span style="color: orange">${m}</span>`;
        }
      );
    };
  };
  /////////////////////////// (1) ///////////////////////////

  /////////////////////////// (2) ///////////////////////////
  function clearVariants(variantsBlock) {
    while (variantsBlock.firstChild) {
      variantsBlock.removeChild(variantsBlock.firstChild)
    };
  };
  /////////////////////////// (2) ///////////////////////////

  return {
    createSpan: createSpanItems,
    clearVars: clearVariants
  };

})();

document.addEventListener('click', (e) => {
  if (e.target.className === 'varianItem') {
    varMod.clearVars(variants);
    variants.style.opacity = 0;
    input.value = e.target.getAttribute('value');
  }
});

input.addEventListener("keydown", function(e) {
  if (!/Arrow(Up|Down)/.test(e.key)) return;
  e.preventDefault();
  
  let suggestions = document.querySelectorAll(".variantsDiv .varianItem");
  if (suggestions.length == 0) return;
  
  let active = document.querySelector(".variantsDiv .varianItem.active");
  
  let curr_index = [].indexOf.call(suggestions, active);
  let change_index = e.key.includes("Up") ? -1 : 1;  
  let new_index = (curr_index + change_index + suggestions.length) % suggestions.length;
  
  if (active) active.classList.remove("active");
  suggestions[new_index].classList.add("active");
});

input.addEventListener('input', function(e) {

  let val = input.value.toLowerCase(),
    firstLetter = val.slice(0, 1).toLowerCase();

  if (!val) {
    varMod.clearVars(variants);
    variants.style.opacity = 0;
  }

  if (!wordsObject[firstLetter]) return;

  if (val) {
    variants.style.opacity = 1;
    varMod.createSpan(input, variants, wordsObject);
  };

});

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: aliceblue;
}

.input-wrapper {
  display: block;
  position: relative;
  margin: 40px auto;
  width: 300px;
  height: 36px;
}

.input,
.variantsDiv {
  width: 100%;
  background-color: ghostwhite;
  border-radius: 5px;
  letter-spacing: 1.5px;
  font-family: 'Arial';
  font-size: 19px;
}

.input {
  display: block;
  padding: 0px 12px 0px 12px;
  position: relative;
  height: 100%;
  font-family: 'Arial'
}

.variantsDiv {
  min-height: 36px;
  position: absolute;
  top: 125%;
  left: 0px;
  border: 2px solid gray;
  opacity: 0;
  transition: all 0.3s;
  max-height: 300px;
  overflow-Y: scroll;
}

.varianItem {
  display: block;
  width: 100%;
  height: 36px;
  line-height: 36px;
  padding: 0px 12px 0px 12px;
}

.varianItem.active, .varianItem:hover {
  cursor: pointer;
  background: #e0e0e0;
}

<div class="input-wrapper">
  <input type="text" class="input">
  <div class="variantsDiv">
  </div>
</div>