diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css index 6fe1913de52..b598cf2613b 100644 --- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css +++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css @@ -363,6 +363,7 @@ } } +.VisuallyHidden, .VisuallyHiddenClose { position: absolute; width: 1px; diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.tsx index 9cdbf0164a5..dc1765a5ad2 100644 --- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.tsx +++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.tsx @@ -7,6 +7,8 @@ import styles from './index.module.css'; export default function ExampleAutocompleteCommandPalette() { const [open, setOpen] = React.useState(false); + const inputRef = React.useRef(null); + const shortcutsDescriptionId = React.useId(); function handleItemClick() { setOpen(false); @@ -18,7 +20,11 @@ export default function ExampleAutocompleteCommandPalette() { - + @@ -77,12 +86,18 @@ export default function ExampleAutocompleteCommandPalette() {
+ + Use Enter to activate the highlighted item. Use Control or Command K for command + actions. +
Activate Enter
Actions + Ctrl + / Cmd K
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx index c6cb7b4b1d3..b0c42804ca6 100644 --- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx +++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx @@ -6,6 +6,8 @@ import { ScrollArea } from '@base-ui/react/scroll-area'; export default function ExampleAutocompleteCommandPalette() { const [open, setOpen] = React.useState(false); + const inputRef = React.useRef(null); + const shortcutsDescriptionId = React.useId(); function handleItemClick() { setOpen(false); @@ -22,6 +24,7 @@ export default function ExampleAutocompleteCommandPalette() { Close command palette @@ -81,6 +87,10 @@ export default function ExampleAutocompleteCommandPalette() {
+ + Use Enter to activate the highlighted item. Use Control or Command K for command + actions. +
Activate @@ -89,6 +99,10 @@ export default function ExampleAutocompleteCommandPalette() {
Actions + + Ctrl + + / Cmd