From 3f20b0cc1b3303482e4b02ff51fb60a6ba4d43ce Mon Sep 17 00:00:00 2001 From: Andrew Jiang <andrew@buildwithfern.com> Date: Fri, 6 Dec 2024 20:52:20 -0500 Subject: [PATCH] improve keyboard accessibility when the input is not focused --- .../src/components/desktop/desktop-command.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/ui/fern-docs-search-ui/src/components/desktop/desktop-command.tsx b/packages/ui/fern-docs-search-ui/src/components/desktop/desktop-command.tsx index e1fadb7c11..218ba3caf3 100644 --- a/packages/ui/fern-docs-search-ui/src/components/desktop/desktop-command.tsx +++ b/packages/ui/fern-docs-search-ui/src/components/desktop/desktop-command.tsx @@ -99,10 +99,17 @@ const DesktopCommand = forwardRef<HTMLDivElement, DesktopCommandProps & Componen return; } - // if input is alphanumeric, focus input + // if input is alphanumeric, space, backspace, delete, arrow left, arrow right, then focus input // note: this func is onKeyDownCapture so it will fire before the input // which is important so that the first character typed isn't swallowed - if (/^[a-zA-Z0-9]$/.test(e.key)) { + if ( + /^[a-zA-Z0-9]$/.test(e.key) || + e.key === " " || + e.key === "Backspace" || + e.key === "Delete" || + e.key === "ArrowLeft" || + e.key === "ArrowRight" + ) { // focus input _immediately_: inputRef.current?.focus(); // scrollToTop();c