diff --git a/README.md b/README.md index 19b9aa54..376be1d8 100644 --- a/README.md +++ b/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 diff --git a/src/ValueNodes.tsx b/src/ValueNodes.tsx index 57208d31..d0476ac4 100644 --- a/src/ValueNodes.tsx +++ b/src/ValueNodes.tsx @@ -65,8 +65,21 @@ export const NumberValue: React.FC = ({ }) => { 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) => {