fix(command-palette): accept HTML input attributes on CommandPalette.Input (#451)

Author: mattrothenberg

.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<HTMLInputElement>`. Export new `CommandPaletteInputProps` type.

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 (
+    <div className="flex flex-col items-start gap-4">
+      <Button onClick={() => setOpen(true)}>
+        Open Palette (No Autocomplete)
+      </Button>
+
+      <CommandPalette.Root
+        open={open}
+        onOpenChange={setOpen}
+        items={filteredGroups}
+        value={search}
+        onValueChange={setSearch}
+        itemToStringValue={(group) => group.label}
+        onSelect={(item) => {
+          console.log("Selected:", item.title);
+          setOpen(false);
+          setSearch("");
+        }}
+        getSelectableItems={getSelectableItems}
+      >
+        <CommandPalette.Input
+          placeholder="Search commands..."
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="none"
+          spellCheck={false}
+          data-1p-ignore="true"
+          data-lpignore="true"
+        />
+        <CommandPalette.List>
+          <CommandPalette.Results>
+            {(group: CommandGroup) => (
+              <CommandPalette.Group key={group.id} items={group.items}>
+                <CommandPalette.GroupLabel>
+                  {group.label}
+                </CommandPalette.GroupLabel>
+                <CommandPalette.Items>
+                  {(item: CommandItem) => (
+                    <CommandPalette.Item
+                      key={item.id}
+                      value={item}
+                      onClick={() => {
+                        setOpen(false);
+                        setSearch("");
+                      }}
+                    >
+                      <span className="flex items-center gap-3">
+                        {item.icon && (
+                          <span className="text-kumo-subtle">{item.icon}</span>
+                        )}
+                        <span>{item.title}</span>
+                      </span>
+                    </CommandPalette.Item>
+                  )}
+                </CommandPalette.Items>
+              </CommandPalette.Group>
+            )}
+          </CommandPalette.Results>
+          <CommandPalette.Empty>No commands found</CommandPalette.Empty>
+        </CommandPalette.List>
+      </CommandPalette.Root>
+    </div>
+  );
+}
+
 // ResultItem with breadcrumbs and highlights
 interface SearchResult {
   id: string;

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() {
   <CommandPaletteLoadingDemo client:visible />
 </ComponentExample>
 
+### Disabling Browser Autocomplete
+
+<p>Pass standard HTML input attributes like `autoComplete`, `autoCorrect`, `spellCheck`, and `data-*` to suppress browser and password manager autocomplete overlays.</p>
+<ComponentExample demo="CommandPaletteNoAutocompleteDemo">
+  <CommandPaletteNoAutocompleteDemo client:visible />
+</ComponentExample>
+
 ### ResultItem with Breadcrumbs
 
   <p>

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<HTMLInputElement>) => {
       // Let consumer handle first (e.g., for custom Escape/Backspace behavior)
       onKeyDownProp?.(e);
       if (e.defaultPrevented) return;

packages/kumo/src/components/command-palette/index.ts

@@ -6,6 +6,7 @@ export {
 export type {
   HighlightRange,
   CommandPaletteRootProps,
+  CommandPaletteInputProps,
   CommandPaletteItemProps,
   CommandPaletteFooterProps,
   CommandPaletteListProps,

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<T = unknown> {
   /** 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<HTMLInputElement>,
+    "children" | "defaultValue" | "defaultChecked" | "color"
+  > {
+  /** Optional leading content (e.g., back button) */
+  leading?: ReactNode;
+  /** Optional trailing content (e.g., Esc button) */
+  trailing?: ReactNode;
+}

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,