diff --git a/.changeset/command-palette-input-html-attrs.md b/.changeset/command-palette-input-html-attrs.md new file mode 100644 index 0000000000..a960b55ee2 --- /dev/null +++ b/.changeset/command-palette-input-html-attrs.md @@ -0,0 +1,5 @@ +--- +"@cloudflare/kumo": patch +--- + +Allow `CommandPalette.Input` to accept standard HTML input attributes (`autoComplete`, `autoCorrect`, `autoCapitalize`, `spellCheck`, `data-*`, etc.) by extending its props type with `InputHTMLAttributes`. Export new `CommandPaletteInputProps` type. diff --git a/packages/kumo-docs-astro/src/components/demos/CommandPaletteDemo.tsx b/packages/kumo-docs-astro/src/components/demos/CommandPaletteDemo.tsx index f1ce1ada19..ecd44d256a 100644 --- a/packages/kumo-docs-astro/src/components/demos/CommandPaletteDemo.tsx +++ b/packages/kumo-docs-astro/src/components/demos/CommandPaletteDemo.tsx @@ -292,6 +292,78 @@ export function CommandPaletteLoadingDemo() { ); } +/** Demonstrates disabling browser autocomplete and spellcheck on the command palette input. */ +export function CommandPaletteNoAutocompleteDemo() { + const [open, setOpen] = useState(false); + const [search, setSearch] = useState(""); + + const filteredGroups = filterGroupsWithItems(sampleGroups, search); + + return ( +
+ + + group.label} + onSelect={(item) => { + console.log("Selected:", item.title); + setOpen(false); + setSearch(""); + }} + getSelectableItems={getSelectableItems} + > + + + + {(group: CommandGroup) => ( + + + {group.label} + + + {(item: CommandItem) => ( + { + setOpen(false); + setSearch(""); + }} + > + + {item.icon && ( + {item.icon} + )} + {item.title} + + + )} + + + )} + + No commands found + + +
+ ); +} + // ResultItem with breadcrumbs and highlights interface SearchResult { id: string; diff --git a/packages/kumo-docs-astro/src/pages/components/command-palette.mdx b/packages/kumo-docs-astro/src/pages/components/command-palette.mdx index 9abef99614..9bd8e3ed8a 100644 --- a/packages/kumo-docs-astro/src/pages/components/command-palette.mdx +++ b/packages/kumo-docs-astro/src/pages/components/command-palette.mdx @@ -13,6 +13,7 @@ import { CommandPaletteBasicDemo, CommandPaletteSimpleDemo, CommandPaletteLoadingDemo, + CommandPaletteNoAutocompleteDemo, CommandPaletteResultItemDemo, } from "~/components/demos/CommandPaletteDemo"; @@ -153,6 +154,13 @@ export default function Example() { +### Disabling Browser Autocomplete + +

Pass standard HTML input attributes like `autoComplete`, `autoCorrect`, `spellCheck`, and `data-*` to suppress browser and password manager autocomplete overlays.

+ + + + ### ResultItem with Breadcrumbs

diff --git a/packages/kumo/src/components/command-palette/command-palette.tsx b/packages/kumo/src/components/command-palette/command-palette.tsx index 280457a4ab..d1b8a9804a 100644 --- a/packages/kumo/src/components/command-palette/command-palette.tsx +++ b/packages/kumo/src/components/command-palette/command-palette.tsx @@ -25,6 +25,7 @@ import { import type { HighlightRange, CommandPaletteRootProps, + CommandPaletteInputProps, CommandPaletteListProps, CommandPaletteGroupProps, CommandPaletteGroupLabelProps, @@ -731,21 +732,12 @@ function PanelInput({ leading, trailing, ...props -}: { - autoFocus?: boolean; - placeholder?: string; - className?: string; - onKeyDown?: (e: React.KeyboardEvent) => void; - /** Optional leading content (e.g., back button) */ - leading?: React.ReactNode; - /** Optional trailing content (e.g., Esc button) */ - trailing?: React.ReactNode; -}) { +}: CommandPaletteInputProps) { const { onInputKeyDown } = useContext(PanelContext); const { onClose } = useContext(DialogContext); const handleKeyDown = useCallback( - (e: React.KeyboardEvent) => { + (e: React.KeyboardEvent) => { // Let consumer handle first (e.g., for custom Escape/Backspace behavior) onKeyDownProp?.(e); if (e.defaultPrevented) return; diff --git a/packages/kumo/src/components/command-palette/index.ts b/packages/kumo/src/components/command-palette/index.ts index 2ce4ad0399..f052af9af9 100644 --- a/packages/kumo/src/components/command-palette/index.ts +++ b/packages/kumo/src/components/command-palette/index.ts @@ -6,6 +6,7 @@ export { export type { HighlightRange, CommandPaletteRootProps, + CommandPaletteInputProps, CommandPaletteItemProps, CommandPaletteFooterProps, CommandPaletteListProps, diff --git a/packages/kumo/src/components/command-palette/types.ts b/packages/kumo/src/components/command-palette/types.ts index 94e1f1c8f3..ce7a643600 100644 --- a/packages/kumo/src/components/command-palette/types.ts +++ b/packages/kumo/src/components/command-palette/types.ts @@ -1,4 +1,4 @@ -import type { ReactNode } from "react"; +import type { ReactNode, InputHTMLAttributes } from "react"; import type { PortalContainer } from "../../utils/portal-provider"; /** A single highlight range within a string [startIndex, endIndex] (inclusive) */ @@ -160,3 +160,20 @@ export interface CommandPaletteResultItemProps { /** Whether this item is non-interactive (no hover/highlight) */ nonInteractive?: boolean; } + +/** + * Props for the CommandPalette.Input component - search input inside the palette. + * + * Extends standard HTML input attributes so you can pass props like + * `autoComplete`, `autoCorrect`, `autoCapitalize`, `spellCheck`, `data-*`, etc. + */ +export interface CommandPaletteInputProps + extends Omit< + InputHTMLAttributes, + "children" | "defaultValue" | "defaultChecked" | "color" + > { + /** Optional leading content (e.g., back button) */ + leading?: ReactNode; + /** Optional trailing content (e.g., Esc button) */ + trailing?: ReactNode; +} diff --git a/packages/kumo/src/index.ts b/packages/kumo/src/index.ts index 2e2b334716..98e1077c9d 100644 --- a/packages/kumo/src/index.ts +++ b/packages/kumo/src/index.ts @@ -172,6 +172,7 @@ export { KUMO_COMMAND_PALETTE_VARIANTS, KUMO_COMMAND_PALETTE_DEFAULT_VARIANTS, type CommandPaletteRootProps, + type CommandPaletteInputProps, type CommandPaletteItemProps, type CommandPaletteResultItemProps, type CommandPaletteFooterProps,