#49 Increment number input with arrow keys

README.md

@@ -80,6 +80,7 @@ It's pretty self explanatory (click the "edit" icon to edit, etc.), but there ar
 - `Escape` to cancel editing
 - When clicking the "clipboard" icon, holding down `Cmd/Ctrl` will copy the *path* to the selected node rather than its value
 - When opening/closing a node, hold down "Alt/Option" to open/close *all* child nodes at once
+- For Number inputs, arrow-up and down keys will increment/decrement the value
 
 ## Props overview
 

src/ValueNodes.tsx

@@ -65,8 +65,21 @@ export const NumberValue: React.FC<InputProps & { value: number }> = ({
 }) => {
   const { getStyles } = useTheme()
   const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') handleEdit()
-    else if (e.key === 'Escape') handleCancel()
+    switch (e.key) {
+      case 'Enter':
+        handleEdit()
+        break
+      case 'Escape':
+        handleCancel()
+        break
+      case 'ArrowUp':
+        e.preventDefault()
+        setValue((prev) => Number(prev) + 1)
+        break
+      case 'ArrowDown':
+        e.preventDefault()
+        setValue((prev) => Number(prev) - 1)
+    }
   }
 
   const validateNumber = (input: string) => {