diff --git a/src/components/Numeric.vue b/src/components/Numeric.vue index 43dea88..3f8dc35 100644 --- a/src/components/Numeric.vue +++ b/src/components/Numeric.vue @@ -11,7 +11,7 @@ :aria-valuetext="display" tabindex="0" @pointerdown="onPointerDown" - @keydown.prevent.stop="onKey" + @keydown="onKey" > {{ display }} @@ -103,14 +103,41 @@ function onPointerCancel() { function onKey(e) { const key = e.key + let handled = false let delta = 0 - if (key === 'ArrowRight' || key === 'ArrowUp') delta = props.step - else if (key === 'ArrowLeft' || key === 'ArrowDown') delta = -props.step - else if (key === 'PageUp') delta = props.step * 10 - else if (key === 'PageDown') delta = -props.step * 10 - else if (key === 'Home') current.value = props.min - else if (key === 'End') current.value = props.max + switch (key) { + case 'ArrowRight': + case 'ArrowUp': + delta = props.step + handled = true + break + case 'ArrowLeft': + case 'ArrowDown': + delta = -props.step + handled = true + break + case 'PageUp': + delta = props.step * 10 + handled = true + break + case 'PageDown': + delta = -props.step * 10 + handled = true + break + case 'Home': + current.value = props.min + handled = true + break + case 'End': + current.value = props.max + handled = true + break + } if (delta !== 0) current.value = current.value + delta + if (handled) { + e.preventDefault() + e.stopPropagation() + } }