Fix primefaces#4465: KeyFilter Android fix (primefaces#4469)

userkks · May 31, 2023 · 57d92b4 · 57d92b4
1 parent b1f3f5c
commit 57d92b4
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 17 deletions.
diff --git a/components/doc/keyfilter/presetsdoc.js b/components/doc/keyfilter/presetsdoc.js
@@ -6,11 +6,14 @@ export function PresetsDoc(props) {
     const code = {
         basic: `
 <InputText keyfilter="int" />
+<InputText keyfilter="pint" />
 <InputText keyfilter="num" />
+<InputText keyfilter="pnum" />
 <InputText keyfilter="money" />
 <InputText keyfilter="hex" />
 <InputText keyfilter="alpha" />
 <InputText keyfilter="alphanum" />
+<InputText keyfilter="email" />
         `,
         javascript: `
 import React from 'react'; 
@@ -39,7 +42,7 @@ export default function PresetsDemo() {
                     <InputText id="money" keyfilter="money" className="w-full" />
                 </div>
             </div>
-            <div className="flex flex-wrap gap-3">
+            <div className="flex flex-wrap gap-3 mb-4">
                 <div className="flex-auto">
                     <label htmlFor="hex" className="font-bold block mb-2">
                         Hex
@@ -59,6 +62,26 @@ export default function PresetsDemo() {
                     <InputText id="alphanumeric" keyfilter="alphanum" className="w-full" />
                 </div>
             </div>
+            <div className="flex flex-wrap gap-3">
+                <div className="flex-auto">
+                    <label htmlFor="pint" className="font-bold block mb-2">
+                            Positive Integer
+                    </label>
+                    <InputText id="pint" keyfilter="pint" className="w-full" />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="pnum" className="font-bold block mb-2">
+                            Positive Number
+                    </label>
+                    <InputText id="pnum" keyfilter="pnum" className="w-full" />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="email" className="font-bold block mb-2">
+                            Email
+                    </label>
+                    <InputText id="email" keyfilter="email" className="w-full" />
+                </div>
+            </div>
         </div>
     )
 }
@@ -90,7 +113,7 @@ export default function PresetsDemo() {
                     <InputText id="money" keyfilter="money" className="w-full" />
                 </div>
             </div>
-            <div className="flex flex-wrap gap-3">
+            <div className="flex flex-wrap gap-3 mb-4">
                 <div className="flex-auto">
                     <label htmlFor="hex" className="font-bold block mb-2">
                         Hex
@@ -110,6 +133,26 @@ export default function PresetsDemo() {
                     <InputText id="alphanumeric" keyfilter="alphanum" className="w-full" />
                 </div>
             </div>
+            <div className="flex flex-wrap gap-3">
+                <div className="flex-auto">
+                    <label htmlFor="pint" className="font-bold block mb-2">
+                            Positive Integer
+                    </label>
+                    <InputText id="pint" keyfilter="pint" className="w-full" />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="pnum" className="font-bold block mb-2">
+                            Positive Number
+                    </label>
+                    <InputText id="pnum" keyfilter="pnum" className="w-full" />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="email" className="font-bold block mb-2">
+                            Email
+                    </label>
+                    <InputText id="email" keyfilter="email" className="w-full" />
+                </div>
+            </div>
         </div>
     )
 }
@@ -144,7 +187,7 @@ export default function PresetsDemo() {
                         <InputText id="money" keyfilter="money" className="w-full" />
                     </div>
                 </div>
-                <div className="flex flex-wrap gap-3">
+                <div className="flex flex-wrap gap-3 mb-4">
                     <div className="flex-auto">
                         <label htmlFor="hex" className="font-bold block mb-2">
                             Hex
@@ -164,6 +207,26 @@ export default function PresetsDemo() {
                         <InputText id="alphanumeric" keyfilter="alphanum" className="w-full" />
                     </div>
                 </div>
+                <div className="flex flex-wrap gap-3">
+                    <div className="flex-auto">
+                        <label htmlFor="pint" className="font-bold block mb-2">
+                            Positive Integer
+                        </label>
+                        <InputText id="pint" keyfilter="pint" className="w-full" />
+                    </div>
+                    <div className="flex-auto">
+                        <label htmlFor="pnum" className="font-bold block mb-2">
+                            Positive Number
+                        </label>
+                        <InputText id="pnum" keyfilter="pnum" className="w-full" />
+                    </div>
+                    <div className="flex-auto">
+                        <label htmlFor="email" className="font-bold block mb-2">
+                            Email
+                        </label>
+                        <InputText id="email" keyfilter="email" className="w-full" />
+                    </div>
+                </div>
             </div>
             <DocSectionCode code={code} />
         </>

diff --git a/components/lib/inputtext/InputText.js b/components/lib/inputtext/InputText.js
@@ -20,6 +20,14 @@ export const InputText = React.memo(
             }
         };
 
+        const onBeforeInput = (event) => {
+            props.onBeforeInput && props.onBeforeInput(event);
+
+            if (props.keyfilter) {
+                KeyFilter.onBeforeInput(event, props.keyfilter, props.validateOnly);
+            }
+        };
+
         const onInput = (event) => {
             const target = event.target;
             let validatePattern = true;
@@ -61,9 +69,10 @@ export const InputText = React.memo(
             {
                 ref: elementRef,
                 className,
-                onInput: (e) => onInput(e),
-                onKeyDown: (e) => onKeyDown(e),
-                onPaste: (e) => onPaste(e)
+                onBeforeInput: onBeforeInput,
+                onInput: onInput,
+                onKeyDown: onKeyDown,
+                onPaste: onPaste
             },
             InputTextBase.getOtherProps(props),
             ptm('root')

diff --git a/components/lib/inputtext/InputTextBase.js b/components/lib/inputtext/InputTextBase.js
@@ -7,6 +7,7 @@ export const InputTextBase = ComponentBase.extend({
         validateOnly: false,
         tooltip: null,
         tooltipOptions: null,
+        onBeforeInput: null,
         onInput: null,
         onKeyDown: null,
         onPaste: null,

diff --git a/components/lib/inputtextarea/InputTextarea.js b/components/lib/inputtextarea/InputTextarea.js
@@ -47,6 +47,14 @@ export const InputTextarea = React.memo(
             }
         };
 
+        const onBeforeInput = (event) => {
+            props.onBeforeInput && props.onBeforeInput(event);
+
+            if (props.keyfilter) {
+                KeyFilter.onBeforeInput(event, props.keyfilter, props.validateOnly);
+            }
+        };
+
         const onPaste = (event) => {
             props.onPaste && props.onPaste(event);
 
@@ -122,6 +130,7 @@ export const InputTextarea = React.memo(
                 onBlur: onBlur,
                 onKeyUp: onKeyUp,
                 onKeyDown: onKeyDown,
+                onBeforeInput: onBeforeInput,
                 onInput: onInput,
                 onPaste: onPaste
             },

diff --git a/components/lib/inputtextarea/InputTextareaBase.js b/components/lib/inputtextarea/InputTextareaBase.js
@@ -7,6 +7,7 @@ export const InputTextareaBase = ComponentBase.extend({
         keyfilter: null,
         onBlur: null,
         onFocus: null,
+        onBeforeInput: null,
         onInput: null,
         onKeyDown: null,
         onKeyUp: null,

diff --git a/components/lib/keyfilter/KeyFilter.js b/components/lib/keyfilter/KeyFilter.js
@@ -1,3 +1,5 @@
+import { DomHandler } from '../utils/Utils';
+
 export const KeyFilter = {
     /* eslint-disable */
     DEFAULT_MASKS: {
@@ -17,26 +19,26 @@ export const KeyFilter = {
         return KeyFilter.DEFAULT_MASKS[keyfilter] ? KeyFilter.DEFAULT_MASKS[keyfilter] : keyfilter;
     },
 
-    onKeyPress(e, keyfilter, validateOnly) {
-        if (validateOnly) {
+    onBeforeInput(e, keyfilter, validateOnly) {
+        // android devices must use beforeinput https://stackoverflow.com/questions/36753548/keycode-on-android-is-always-229
+        if (validateOnly || !DomHandler.isAndroid()) {
             return;
         }
 
-        if (e.ctrlKey || e.altKey) {
+        this.validateKey(e, e.data, keyfilter);
+    },
+
+    onKeyPress(e, keyfilter, validateOnly) {
+        // non android devices use keydown
+        if (validateOnly || DomHandler.isAndroid()) {
             return;
         }
 
-        const isPrintableKey = e.key.length === 1;
-
-        if (!isPrintableKey) {
+        if (e.ctrlKey || e.altKey) {
             return;
         }
 
-        const regex = this.getRegex(keyfilter);
-
-        if (!regex.test(e.key)) {
-            e.preventDefault();
-        }
+        this.validateKey(e, e.key, keyfilter);
     },
 
     onPaste(e, keyfilter, validateOnly) {
@@ -57,6 +59,24 @@ export const KeyFilter = {
         });
     },
 
+    validateKey(e, key, keyfilter) {
+        if (key === null || key === undefined) {
+            return;
+        }
+
+        const isPrintableKey = key.length === 1;
+
+        if (!isPrintableKey) {
+            return;
+        }
+
+        const regex = this.getRegex(keyfilter);
+
+        if (!regex.test(key)) {
+            e.preventDefault();
+        }
+    },
+
     validate(e, keyfilter) {
         let value = e.target.value,
             validatePattern = true;