Fixed onCompleted trigger when placeholder is one character/digit

Author: n3m

src/index.tsx

@@ -23,8 +23,8 @@ export interface ReactInputVerificationCodeProps {
 const ReactInputVerificationCode = ({
   autoFocus = false,
   length = 4,
-  onChange = () => {},
-  onCompleted = () => {},
+  onChange = () => { },
+  onCompleted = () => { },
   placeholder = '·',
   value: pValue,
   dataCy = 'verification-code',
@@ -156,7 +156,7 @@ const ReactInputVerificationCode = ({
     const stringValue = value.join('');
     const isCompleted = stringValue.length === length;
 
-    if (isCompleted) onCompleted(stringValue);
+    if (isCompleted && stringValue !== emptyValue.join('')) onCompleted(stringValue);
     onChange(stringValue);
   }, [value, length]);
 
@@ -208,9 +208,8 @@ const ReactInputVerificationCode = ({
             ref={ref}
             role='button'
             tabIndex={0}
-            className={`ReactInputVerificationCode__item ${
-              value[i] !== placeholder ? 'is-filled' : ''
-            } ${i === activeIndex ? 'is-active' : ''}`}
+            className={`ReactInputVerificationCode__item ${value[i] !== placeholder ? 'is-filled' : ''
+              } ${i === activeIndex ? 'is-active' : ''}`}
             onFocus={onItemFocus(i)}
             data-cy={`${dataCy}-${i}-item`}
           >