diff --git a/components/command-palette/__tests__/command-palette.test.tsx b/components/command-palette/__tests__/command-palette.test.tsx index c19a790e9..2bd4fae1e 100644 --- a/components/command-palette/__tests__/command-palette.test.tsx +++ b/components/command-palette/__tests__/command-palette.test.tsx @@ -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(); diff --git a/components/command-palette/command-palette.tsx b/components/command-palette/command-palette.tsx index 5e076f2d5..dee815fb7 100644 --- a/components/command-palette/command-palette.tsx +++ b/components/command-palette/command-palette.tsx @@ -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" /> Esc {/* Full screen on a phone: no backdrop to tap and no Escape key (R4). */}