// in an open menu, ↑↓ move real focus between its entries (home and end jump to the ends),
// like a native menu. without js the menus still work, with tab. the search results are the one
// exception: focus stays in the field while you type, so addressbar.ts draws that highlight.

const entries = (menu: HTMLElement) => [...menu.querySelectorAll<HTMLElement>("a, button")].filter((a) => a.offsetParent);

/** focuses the current entry in a menu that just opened, or its first */
export function focusIn(menu: HTMLElement) {
  const ls = entries(menu);
  (ls.find((a) => a.hasAttribute("aria-current")) ?? ls[0])?.focus();
}

document.addEventListener("keydown", (e) => {
  const at = e.target as HTMLElement;
  const menu = at.closest<HTMLElement>(".menu:popover-open");
  if (!menu) return;
  const ls = entries(menu);
  const i = ls.indexOf(at);
  const to = ({ ArrowDown: i + 1, ArrowUp: i - 1, Home: 0, End: ls.length - 1 } as Record<string, number>)[e.key];
  if (to === undefined) return;
  e.preventDefault();
  ls[Math.max(0, Math.min(ls.length - 1, to))]?.focus();
});

export {};