Add option for disabling vim bindings (#168)

pacocoursey · Aug 14, 2023 · dc0d0e5 · dc0d0e5 · vercel · Aug 14, 2023
1 parent ba2e200
commit dc0d0e5
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 8 deletions.
diff --git a/cmdk/src/index.tsx b/cmdk/src/index.tsx
@@ -5,10 +5,11 @@ import { commandScore } from './command-score'
 type Children = { children?: React.ReactNode }
 type DivProps = React.HTMLAttributes<HTMLDivElement>
 
-type LoadingProps = Children & DivProps & {
-  /** Estimated progress of loading asynchronous options. */
-  progress?: number
-}
+type LoadingProps = Children &
+  DivProps & {
+    /** Estimated progress of loading asynchronous options. */
+    progress?: number
+  }
 type EmptyProps = Children & DivProps & {}
 type SeparatorProps = DivProps & {
   /** Whether this separator should always be rendered. Useful if you disable automatic filtering. */
@@ -90,6 +91,10 @@ type CommandProps = Children &
      * Optionally set to `true` to turn on looping around when using the arrow keys.
      */
     loop?: boolean
+    /**
+     * Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.
+     */
+    vimBindings?: boolean
   }
 
 type Context = {
@@ -160,7 +165,7 @@ const Command = React.forwardRef<HTMLDivElement, CommandProps>((props, forwarded
   const ids = useLazyRef<Map<string, string>>(() => new Map()) // id → value
   const listeners = useLazyRef<Set<() => void>>(() => new Set()) // [...rerenders]
   const propsRef = useAsRef(props)
-  const { label, children, value, onValueChange, filter, shouldFilter, ...etc } = props
+  const { label, children, value, onValueChange, filter, shouldFilter, vimBindings = true, ...etc } = props
 
   const listId = React.useId()
   const labelId = React.useId()
@@ -519,7 +524,7 @@ const Command = React.forwardRef<HTMLDivElement, CommandProps>((props, forwarded
             case 'n':
             case 'j': {
               // vim keybind down
-              if (e.ctrlKey) {
+              if (vimBindings && e.ctrlKey) {
                 next(e)
               }
               break
@@ -531,7 +536,7 @@ const Command = React.forwardRef<HTMLDivElement, CommandProps>((props, forwarded
             case 'p':
             case 'k': {
               // vim keybind up
-              if (e.ctrlKey) {
+              if (vimBindings && e.ctrlKey) {
                 prev(e)
               }
               break

diff --git a/test/keybind.test.ts b/test/keybind.test.ts
@@ -101,3 +101,25 @@ test.describe('vim np keybinds', async () => {
     await expect(page.locator(`[cmdk-item][aria-selected="true"]`)).toHaveAttribute('data-value', 'first')
   })
 })
+
+test.describe('no-vim keybinds', async () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/keybinds?noVim=true')
+  })
+
+  test('ctrl j/k does nothing', async ({ page }) => {
+    await expect(page.locator(`[cmdk-item][aria-selected="true"]`)).toHaveAttribute('data-value', 'first')
+    await page.locator(`[cmdk-input]`).press('Control+j')
+    await expect(page.locator(`[cmdk-item][aria-selected="true"]`)).toHaveAttribute('data-value', 'first')
+    await page.locator(`[cmdk-input]`).press('Control+k')
+    await expect(page.locator(`[cmdk-item][aria-selected="true"]`)).toHaveAttribute('data-value', 'first')
+  })
+
+  test('ctrl n/p does nothing', async ({ page }) => {
+    await expect(page.locator(`[cmdk-item][aria-selected="true"]`)).toHaveAttribute('data-value', 'first')
+    await page.locator(`[cmdk-input]`).press('Control+n')
+    await expect(page.locator(`[cmdk-item][aria-selected="true"]`)).toHaveAttribute('data-value', 'first')
+    await page.locator(`[cmdk-input]`).press('Control+p')
+    await expect(page.locator(`[cmdk-item][aria-selected="true"]`)).toHaveAttribute('data-value', 'first')
+  })
+})
diff --git a/test/pages/keybinds.tsx b/test/pages/keybinds.tsx
@@ -1,10 +1,14 @@
 import { Command } from 'cmdk'
+import { useRouter } from 'next/router'
 import * as React from 'react'
 
 const Page = () => {
+  const {
+    query: { noVim },
+  } = useRouter()
   return (
     <div>
-      <Command>
+      <Command vimBindings={!noVim}>
         <Command.Input />
         <Command.List>
           <Command.Empty>No results.</Command.Empty>