Merge pull request #1446 from robertdoneill/fix/command-palette-focus-outline

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

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();

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"
           />
           <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). */}