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:
@@ -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)" }}
|
||||||
|
|||||||
Reference in New Issue
Block a user