arrow keys wrap around (#57)

* arrow keys wrap around

* make wraparound dependent on loop prop

* document loop prop

* prettier formatting

README.md

@@ -133,6 +133,10 @@ Or disable filtering and sorting entirely:
 </Command>
 ```
 
+You can make the arrow keys wrap around the list (when you reach the end, it goes back to the first item) by setting the `loop` prop:
+
+<Command loop />
+
 ### Dialog `[cmdk-dialog]` `[cmdk-overlay]`
 
 Props are forwarded to [Command](#command-cmdk-root). Composes Radix UI's Dialog component. The overlay is always rendered. See the [Radix Documentation](https://www.radix-ui.com/docs/primitives/components/dialog) for more information. Can be controlled with the `open` and `onOpenChange` props.

cmdk/src/index.tsx

@@ -70,6 +70,10 @@ type CommandProps = Children &
      * Event handler called when the selected item of the menu changes.
      */
     onValueChange?: (value: string) => void
+    /**
+     * Optionally set to `true` to turn on looping around when using the arrow keys.
+     */
+    loop?: boolean
   }
 
 type Context = {
@@ -419,7 +423,17 @@ const Command = React.forwardRef<HTMLDivElement, CommandProps>((props, forwarded
     const index = items.findIndex((item) => item === selected)
 
     // Get item at this index
-    const newSelected = items[index + change]
+    let newSelected = items[index + change]
+
+    if (propsRef.current?.loop) {
+      newSelected =
+        index + change < 0
+          ? items[items.length - 1]
+          : index + change === items.length
+          ? items[0]
+          : items[index + change]
+    }
+
     if (newSelected) store.setState('value', newSelected.getAttribute(VALUE_ATTR))
   }