MapComplete/src/Utils/focusWithArrows.ts

export function focusWithArrows(htmlElement: HTMLDivElement, classname: string) {
    const destroy: () => void = undefined
    htmlElement.addEventListener("keyup", (e) => {
        const currentElement = document.activeElement
        const canBeSelected = <HTMLElement[]>(
            Array.from(htmlElement.getElementsByClassName(classname))
        )

        const i = canBeSelected.findIndex(
            (el) => el.contains(currentElement) || el === currentElement
        )
        const l = canBeSelected.length
        if (e.key === "ArrowDown") {
            canBeSelected.at((i + 1) % l).focus()
            return
        }

        if (e.key === "ArrowUp") {
            canBeSelected.at(i - 1).focus()
            return
        }
    })
    return { destroy }
}