Keep Tab inside the admin command menu

The search input is the only tabbable element in the menu, and Base UI's
focus guards let Tab leak out of a single-element trap: focus walked to
the sidebar while the menu stayed open. Arrow keys drive the selection
in a command menu, so Tab now stays on the input.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-11-11 12:11:19 +05:00
co-authored by Claude Opus 5.5
parent 7a231cf92f
commit ba6da38b9c
+12 -1
View File
@@ -151,7 +151,18 @@ export function AdminCommandMenu({ onOpen }: { onOpen?: () => void }) {
}} }}
> >
<DialogPrimitive.Title className="sr-only">Поиск по админке</DialogPrimitive.Title> <DialogPrimitive.Title className="sr-only">Поиск по админке</DialogPrimitive.Title>
<Command shouldFilter={false} label="Поиск по админке" loop> <Command
shouldFilter={false}
label="Поиск по админке"
loop
// The input is the only tabbable element here, and Base UI's focus
// guards let Tab leak out of a single-element trap (seen live:
// focus walked to the sidebar while the menu stayed open). In a
// command menu arrows move the selection, so Tab simply stays put.
onKeyDown={(e) => {
if (e.key === "Tab") e.preventDefault();
}}
>
<div <div
className="flex items-center gap-2 px-3" className="flex items-center gap-2 px-3"
style={{ borderBottom: "2px solid var(--border)" }} style={{ borderBottom: "2px solid var(--border)" }}