tabswitcher/pages/search/modules/inputHandlers.js

const focusButtonsWithArrows = (e, abortCallback) => {
  if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
    e.preventDefault()

    const buttons = document.querySelectorAll('#searchResults > button')
    if (buttons.length === 0) { return }

    const currentIndex = [...buttons].indexOf(document.activeElement)
    const newIndex = currentIndex === -1
      ? ({
        'ArrowDown': 0,
        'ArrowUp': buttons.length - 1,
      }[e.key])
      : (({
        'ArrowDown': 1,
        'ArrowUp': -1,
      }[e.key]) + currentIndex + buttons.length) % buttons.length

    const shouldAbort = [
      e.key === 'ArrowUp' && currentIndex === 0,
      e.key === 'ArrowDown' && currentIndex === buttons.length - 1,
    ].some(Boolean)

    if (shouldAbort) {
      abortCallback()
    } else {
      buttons[newIndex].focus()
    }
  }
}

export const attachInputHandlers = (store) => {
  const searchBox = document.getElementById('searchbox')
  const actionbox = document.getElementById('actionbox')

  /* Switch to tab */
  const switchToTab = (tabId) => {
    store.actions.goToTab(parseInt(tabId))
    window.close()
  }

  /* Arrow keys */
  document.addEventListener('keydown', (e) => {
    focusButtonsWithArrows(e, () => {
      searchBox.focus()
    })

    if (e.key === 'Escape') {
      searchBox.focus()
    }
  })

  /* Buttons */
  document.addEventListener('click', (event) => {
    if (event.target.classList.contains('tab')) {
      const tabId = event.target.dataset.id
      switchToTab(tabId)
    }
  })

  /* Searchbox*/

  searchBox.addEventListener('input', (e) => {
    store.actions.updateQuery(e.target.value)
  })

  searchBox.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
      let visibleTabs = store.getCurrentState().results
      if (visibleTabs.length === 1) {
        const tabId = visibleTabs[0].obj.id
        switchToTab(tabId)
      } else {
        actionbox.focus()
      }
    }
  })

  /* Actionbox */
}