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.")}
>
diff --git a/src/bootstrap/__tests__/NumberInput.test.js b/src/bootstrap/__tests__/NumberInput.test.js
index 6df7200..c0d89df 100644
--- a/src/bootstrap/__tests__/NumberInput.test.js
+++ b/src/bootstrap/__tests__/NumberInput.test.js
@@ -1,5 +1,5 @@
/*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
@@ -32,7 +32,7 @@ describe("", () => {
});
it("Increase number with button", async () => {
- const increaseButton = getByLabelText(componentContainer, "Increase");
+ const increaseButton = getByLabelText(componentContainer, /Increase/);
fireEvent.mouseDown(increaseButton);
await wait(() =>
expect(onChangeMock).toHaveBeenCalledWith({ target: { value: 2 } })
@@ -40,7 +40,7 @@ describe("", () => {
});
it("Decrease number with button", async () => {
- const decreaseButton = getByLabelText(componentContainer, "Decrease");
+ const decreaseButton = getByLabelText(componentContainer, /Decrease/);
fireEvent.mouseDown(decreaseButton);
await wait(() =>
expect(onChangeMock).toHaveBeenCalledWith({ target: { value: 0 } })
diff --git a/src/bootstrap/__tests__/__snapshots__/NumberInput.test.js.snap b/src/bootstrap/__tests__/__snapshots__/NumberInput.test.js.snap
index 306ab26..874e03f 100644
--- a/src/bootstrap/__tests__/__snapshots__/NumberInput.test.js.snap
+++ b/src/bootstrap/__tests__/__snapshots__/NumberInput.test.js.snap
@@ -20,8 +20,9 @@ exports[` Render number input 1`] = `
value="1"
/>