module
  "use strong";
  const shortcutKey = "/";

import { useEffect, useRef } from "octane";
props { label }: { label: string }
setup
  const inputRef = useRef<HTMLInputElement | null>(null);

  // Own one global listener and release it when the component unmounts.
  useEffect(() => {
    const focusInput = (event: KeyboardEvent) => {
      if (event.key === shortcutKey) inputRef.current?.focus();
    };
    window.addEventListener("keydown", focusInput);
    return () => window.removeEventListener("keydown", focusInput);
  });

section.shortcut-search
  label(htmlFor="shortcut-search") #{label}
  input#shortcut-search(ref={inputRef} aria-keyshortcuts={shortcutKey})
  button(type="button" onClick={() => inputRef.current?.focus()}) Focus search