Fix primefaces#4882: InputMask AutoFocus

melloware · Sep 6, 2023 · 155d9c7 · 155d9c7
1 parent a67b8a6
commit 155d9c7
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/components/lib/inputmask/InputMask.js b/components/lib/inputmask/InputMask.js
@@ -1,15 +1,15 @@
 import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
 import { useMountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { InputText } from '../inputtext/InputText';
 import { DomHandler, ObjectUtils, classNames } from '../utils/Utils';
 import { InputMaskBase } from './InputMaskBase';
-import { PrimeReactContext } from '../api/Api';
 
 export const InputMask = React.memo(
     React.forwardRef((inProps, ref) => {
         const context = React.useContext(PrimeReactContext);
         const props = InputMaskBase.getProps(inProps, context);
-        const elementRef = React.useRef(ref);
+        const elementRef = React.useRef(null);
         const firstNonMaskPos = React.useRef(null);
         const lastRequiredNonMaskPos = React.useRef(0);
         const tests = React.useRef([]);
@@ -300,13 +300,15 @@ export const InputMask = React.memo(
         };
 
         const writeBuffer = () => {
-            elementRef.current.value = buffer.current.join('');
+            if (elementRef.current) {
+                elementRef.current.value = buffer.current.join('');
+            }
         };
 
         const checkVal = (allow) => {
             isValueChecked.current = true;
             //try to place characters where they belong
-            let test = elementRef.current.value,
+            let test = elementRef.current && elementRef.current.value,
                 lastMatch = -1,
                 i,
                 c,
@@ -347,7 +349,7 @@ export const InputMask = React.memo(
                 if (props.autoClear || buffer.current.join('') === defaultBuffer.current) {
                     // Invalid value. Remove it and replace it with the
                     // mask, which is the default behavior.
-                    if (elementRef.current.value) elementRef.current.value = '';
+                    if (elementRef.current && elementRef.current.value) elementRef.current.value = '';
                     clearBuffer(0, len.current);
                 } else {
                     // Invalid value, but we opt to show the value to the
@@ -356,7 +358,10 @@ export const InputMask = React.memo(
                 }
             } else {
                 writeBuffer();
-                elementRef.current.value = elementRef.current.value.substring(0, lastMatch + 1);
+
+                if (elementRef.current) {
+                    elementRef.current.value = elementRef.current.value.substring(0, lastMatch + 1);
+                }
             }
 
             return partialPosition.current ? i : firstNonMaskPos.current;
@@ -372,9 +377,13 @@ export const InputMask = React.memo(
             clearTimeout(caretTimeoutId.current);
             let pos;
 
-            focusText.current = elementRef.current.value;
+            if (elementRef.current) {
+                focusText.current = elementRef.current.value;
+            } else {
+                focusText.current = '';
+            }
 
-            pos = checkVal();
+            pos = checkVal() || 0;
 
             caretTimeoutId.current = setTimeout(() => {
                 if (elementRef.current !== document.activeElement) {
@@ -390,7 +399,7 @@ export const InputMask = React.memo(
                 }
 
                 updateFilledState();
-            }, 10);
+            }, 100);
 
             props.onFocus && props.onFocus(e);
         };

diff --git a/components/lib/inputtext/InputText.js b/components/lib/inputtext/InputText.js
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { KeyFilter } from '../keyfilter/KeyFilter';
 import { Tooltip } from '../tooltip/Tooltip';
 import { DomHandler, ObjectUtils, mergeProps } from '../utils/Utils';
 import { InputTextBase } from './InputTextBase';
-import { useHandleStyle } from '../componentbase/ComponentBase';
 
 export const InputText = React.memo(
     React.forwardRef((inProps, ref) => {