diff --git a/src/bootstrap/NumberInput.js b/src/bootstrap/NumberInput.js index 1a825a5..beaa22d 100644 --- a/src/bootstrap/NumberInput.js +++ b/src/bootstrap/NumberInput.js @@ -50,6 +50,20 @@ function NumberInput({ onChange, inlineText, value, ...props }) { -1 ); + function handleKeyDown(event, enableFunction) { + if (event.key === "Enter" || event.key === " ") { + event.preventDefault(); + enableFunction(true); + } + } + + function handleKeyUp(event, enableFunction) { + if (event.key === "Enter" || event.key === " ") { + event.preventDefault(); + enableFunction(false); + } + } + return ( {inlineText && ( @@ -60,7 +74,15 @@ function NumberInput({ onChange, inlineText, value, ...props }) { className="btn btn-outline-secondary" onMouseDown={() => enableIncrease(true)} onMouseUp={() => enableIncrease(false)} - aria-label="Increase" + onMouseLeave={() => enableIncrease(false)} + onTouchStart={() => enableIncrease(true)} + onTouchEnd={() => enableIncrease(false)} + onTouchCancel={() => enableIncrease(false)} + onKeyDown={(event) => handleKeyDown(event, enableIncrease)} + onKeyUp={(event) => handleKeyUp(event, enableIncrease)} + onBlur={() => enableIncrease(false)} + title={_("Increase value. Hint: Hold to increase faster.")} + aria-label={_("Increase value. Hint: Hold to increase faster.")} > @@ -69,7 +91,15 @@ function NumberInput({ onChange, inlineText, value, ...props }) { className="btn btn-outline-secondary" onMouseDown={() => enableDecrease(true)} onMouseUp={() => enableDecrease(false)} - aria-label="Decrease" + onMouseLeave={() => enableDecrease(false)} + onTouchStart={() => enableDecrease(true)} + onTouchEnd={() => enableDecrease(false)} + onTouchCancel={() => enableDecrease(false)} + onKeyDown={(event) => handleKeyDown(event, enableDecrease)} + onKeyUp={(event) => handleKeyUp(event, enableDecrease)} + onBlur={() => enableDecrease(false)} + title={_("Decrease value. Hint: Hold to decrease faster.")} + aria-label={_("Decrease value. Hint: Hold to decrease faster.")} >