Fix primefaces#2849: InputNumber spinner touch events

melloware · May 5, 2022 · 965e6b1 · 965e6b1
1 parent f9fab4b
commit 965e6b1
Showing 1 changed file with 30 additions and 2 deletions.
diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js
@@ -189,6 +189,13 @@ export const InputNumber = React.memo(React.forwardRef((props, ref) => {
         }
     }
 
+    const onUpButtonTouchStart = (event) => {
+        if (!props.disabled && !props.readOnly) {
+            repeat(event, null, 1);
+            event.preventDefault();
+        }
+    }
+
     const onUpButtonMouseDown = (event) => {
         if (!props.disabled && !props.readOnly) {
             inputRef.current.focus();
@@ -197,6 +204,12 @@ export const InputNumber = React.memo(React.forwardRef((props, ref) => {
         }
     }
 
+    const onUpButtonTouchEnd = () => {
+        if (!props.disabled && !props.readOnly) {
+            clearTimer();
+        }
+    }
+
     const onUpButtonMouseUp = () => {
         if (!props.disabled && !props.readOnly) {
             clearTimer();
@@ -221,6 +234,19 @@ export const InputNumber = React.memo(React.forwardRef((props, ref) => {
         }
     }
 
+    const onDownButtonTouchStart = (event) => {
+        if (!props.disabled && !props.readOnly) {
+            repeat(event, null, -1);
+            event.preventDefault();
+        }
+    }
+
+    const onDownButtonTouchEnd = () => {
+        if (!props.disabled && !props.readOnly) {
+            clearTimer();
+        }
+    }
+
     const onDownButtonMouseDown = (event) => {
         if (!props.disabled && !props.readOnly) {
             inputRef.current.focus();
@@ -953,7 +979,8 @@ export const InputNumber = React.memo(React.forwardRef((props, ref) => {
 
         return (
             <button type="button" className={className} onMouseLeave={onUpButtonMouseLeave} onMouseDown={onUpButtonMouseDown} onMouseUp={onUpButtonMouseUp}
-                onKeyDown={onUpButtonKeyDown} onKeyUp={onUpButtonKeyUp} disabled={props.disabled} tabIndex={-1}>
+                onKeyDown={onUpButtonKeyDown} onKeyUp={onUpButtonKeyUp} onTouchStart={onUpButtonTouchStart} onTouchEnd={onUpButtonTouchEnd}
+                disabled={props.disabled} tabIndex={-1}>
                 <span className={icon}></span>
                 <Ripple />
             </button>
@@ -968,7 +995,8 @@ export const InputNumber = React.memo(React.forwardRef((props, ref) => {
 
         return (
             <button type="button" className={className} onMouseLeave={onDownButtonMouseLeave} onMouseDown={onDownButtonMouseDown} onMouseUp={onDownButtonMouseUp}
-                onKeyDown={onDownButtonKeyDown} onKeyUp={onDownButtonKeyUp} disabled={props.disabled} tabIndex={-1}>
+                onKeyDown={onDownButtonKeyDown} onKeyUp={onDownButtonKeyUp} onTouchStart={onDownButtonTouchStart} onTouchEnd={onDownButtonTouchEnd}
+                disabled={props.disabled} tabIndex={-1}>
                 <span className={icon}></span>
                 <Ripple />
             </button>