follow up on PR #448

[ahmed-s-fatahallah]

Hello again,

I have submitted a PR Num (#448) before for fixing the bug where when you focus on any input box the value will always be added to the first input box even if you are focusing on another one, also I added a paste behavior where when you focus on any input and paste the value will be spread across all inputs because as I was mentioned in the previous PR, I felt it's kinda logical behavior. but thanks to you, you pointed out a bug where when pasting from the mobile browser clipboard autofill the values don't appear in the inputs.

Firstly, Thanks for your reply, I didn't notice this bug.

Secondly, I have fixed it by updating the otpValueRef current with the new value array after the input event triggers inside the if check you wrote to check if the user is pasting from auto fill so the otpValueRef gets the same value as pasted value so the input value gets updated with the entered value.

here is where it is updated:

        if (!hasInvalidInput) {
          handleOTPChange(valueArr);
          focusInput(numInputs - 1);
          otpValueRef.current = valueArr;
        }

Finally: you were checking if the value length is the same as the numInputs then do the logic otherwise do nothing. So, I thought I would enhance this by just splitting the value up to the numInputs limit and pasting the up to the limit to handle if the user is auto pasting longer or shorter value.

you can find the change here:

if (value.length > 1) {
        const valueArr = value.split('', numInputs);
        const hasInvalidInput = valueArr.some((cellInput) => !isInputValueValid(cellInput));
        if (!hasInvalidInput) {
          handleOTPChange(valueArr);
          focusInput(value.length - 1);
          otpValueRef.current = valueArr;
        }
      }

if you don't want this behavior you can revert it. it is on a separate commit.

Note: I tested the changes on a Mac, a Windows, and an Android phone but not on IOS because I don't own IOS devices.

[akashnimare]

!review this pr

[pantomaxbot]

Resetting otpValueRef.current to an empty array on every render when value is an empty string can cause unnecessary re-renders and may not be efficient. Consider using a useEffect hook to handle this condition.

[pantomaxbot]

pastedData.slice(0, numInputs) should be pastedData.slice(0, numInputs - activeInput) to ensure the pasted data fits within the remaining input fields.

[pantomaxbot]

The loop should start from activeInput instead of 0 to ensure the pasted data starts from the currently focused input.

[pantomaxbot]

Reviewed up to commit:12b4acf2edd225ce5ef8f3280124a27c6e0e2967