From 2ebb066b2cf82cde667c66414bd7516ea30669a4 Mon Sep 17 00:00:00 2001
From: Matt Rothenberg <mrothenberg@cloudflare.com>
Date: Mon, 27 Apr 2026 07:20:20 -0400
Subject: [PATCH 1/2] fix(command-palette): accept HTML input attributes on
 CommandPalette.Input

CommandPalette.Input's inline prop type only declared 6 specific props,
causing TypeScript errors when passing standard HTML input attributes like
autoComplete, autoCorrect, spellCheck, and data-* attributes. The rest
spread already forwarded these at runtime, but the types didn't allow it.

- Extend PanelInput props with InputHTMLAttributes<HTMLInputElement>
- Export new CommandPaletteInputProps type from package
- Add docs demo showing autoComplete/spellCheck/password-manager suppression
---
 .../command-palette-input-html-attrs.md       |  5 ++
 .../components/demos/CommandPaletteDemo.tsx   | 72 +++++++++++++++++++
 .../src/pages/components/command-palette.mdx  |  8 +++
 .../command-palette/command-palette.tsx       | 12 +---
 .../src/components/command-palette/index.ts   |  1 +
 .../src/components/command-palette/types.ts   | 23 +++++-
 packages/kumo/src/index.ts                    |  1 +
 7 files changed, 111 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/command-palette-input-html-attrs.md

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<HTMLInputElement>`. 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 (
+    <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;
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() {
   <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>
diff --git a/packages/kumo/src/components/command-palette/command-palette.tsx b/packages/kumo/src/components/command-palette/command-palette.tsx
index 280457a4ab..2089774bfb 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,16 +732,7 @@ 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);
 
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..1d7baeaa82 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,24 @@ 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"
+  > {
+  autoFocus?: boolean;
+  placeholder?: string;
+  className?: string;
+  onKeyDown?: (e: React.KeyboardEvent) => void;
+  /** 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,

From ff42ccb8b4bf26c86c6bbcf079f4c6b467c1726b Mon Sep 17 00:00:00 2001
From: Matt Rothenberg <mrothenberg@cloudflare.com>
Date: Mon, 27 Apr 2026 08:32:43 -0400
Subject: [PATCH 2/2] refactor: drop redundant prop re-declarations from
 CommandPaletteInputProps

Address review feedback: autoFocus, placeholder, className, and onKeyDown
are already inherited from InputHTMLAttributes<HTMLInputElement>, so remove
the redundant re-declarations. Also align the handleKeyDown callback to use
React.KeyboardEvent<HTMLInputElement> for consistency.
---
 .../kumo/src/components/command-palette/command-palette.tsx   | 2 +-
 packages/kumo/src/components/command-palette/types.ts         | 4 ----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/kumo/src/components/command-palette/command-palette.tsx b/packages/kumo/src/components/command-palette/command-palette.tsx
index 2089774bfb..d1b8a9804a 100644
--- a/packages/kumo/src/components/command-palette/command-palette.tsx
+++ b/packages/kumo/src/components/command-palette/command-palette.tsx
@@ -737,7 +737,7 @@ function PanelInput({
   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;
diff --git a/packages/kumo/src/components/command-palette/types.ts b/packages/kumo/src/components/command-palette/types.ts
index 1d7baeaa82..ce7a643600 100644
--- a/packages/kumo/src/components/command-palette/types.ts
+++ b/packages/kumo/src/components/command-palette/types.ts
@@ -172,10 +172,6 @@ export interface CommandPaletteInputProps
     InputHTMLAttributes<HTMLInputElement>,
     "children" | "defaultValue" | "defaultChecked" | "color"
   > {
-  autoFocus?: boolean;
-  placeholder?: string;
-  className?: string;
-  onKeyDown?: (e: React.KeyboardEvent) => void;
   /** Optional leading content (e.g., back button) */
   leading?: ReactNode;
   /** Optional trailing content (e.g., Esc button) */