fix: keep the command palette field's focus outline inside the dialog

The search field fills the header of a dialog with overflow hidden, so the
global focus outline, drawn 2px outside it, lost its top edge and crossed
the header's bottom border. focus-inset draws it inside the field.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Robert ONeill
2026-10-29 22:06:43 -05:00
co-authored by Claude Opus 5.5
parent 66351e0d31
commit b419065d8d
2 changed files with 4 additions and 1 deletions
@@ -53,6 +53,9 @@ describe('command palette', () => {
const input = screen.getByRole('combobox');
expect(input).toHaveFocus();
expect(input).toHaveAttribute('aria-controls', screen.getByRole('listbox').id);
// The field fills the header of a dialog that clips its overflow: the
// focus outline goes inside it, or the dialog cuts its top edge off.
expect(input).toHaveClass('focus-inset');
act(() => { fireEvent.keyDown(input, { key: 'Escape' }); });
expect(screen.queryByRole('dialog')).toBeNull();
@@ -347,7 +347,7 @@ function CommandPalette({ onClose, onShowShortcuts }: { onClose: () => void; onS
placeholder={t("placeholder")}
autoComplete="off"
spellCheck={false}
className="h-12 flex-1 min-w-0 bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"
className="h-12 flex-1 min-w-0 bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-inset"
/>
<kbd className="hidden sm:inline-flex items-center rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-[0.625rem] text-muted-foreground">Esc</kbd>
{/* Full screen on a phone: no backdrop to tap and no Escape key (R4). */}