VOTPInput improvements - Paste handling, autofill focus event, and discussion of partial paste behavior

[Dyskal]

Hi everyone,

I've been working with the VOTPInput component lately and have a couple of improvements that I think could be beneficial. I'd like to get some feedback before submitting a pull request and also open a discussion on a specific behavior.

Here's a summary of the changes:

1. Improved Paste Handling:

• Currently, the component pastes clipboard data directly into the OTP input fields and slice it to length.value characters.

• I've modified the onPaste function to:

  • add a replace(/[\s\uFEFF\xA0]/g, '') to trim and remove any whitespace (the removal of each whitespace is maybe a little bit too aggressive).

• These changes address the following test cases my team had:

  • "1234567": Filled with "123456" => OK
  • "123456 ": Filled with "123456" => OK
  • " 123456 ": Filled with "123456" => OK (Leading/trailing whitespace removed before processing)
  • "validd": Not filled => OK
  • "123 456": Filled with "123456" => OK (Whitespace in the middle are removed)
  • "123456validd": Filled with "123456" => OK
  • "validd123456": Not filled => OK

2. Enhanced autofill focus event:

• When the model's length equals the target length, the component emits the finish event in the watcher.
• I added inside it the line focusIndex.value = length.value - 1; to focus on the last index when autofilling, otherwise the focus would just go to the second element and it seemed weird.

3. Discussion Point: Partial Paste Behavior

• Currently, when pasting a string shorter than the OTP length, the component overrides the existing values in the input fields from the beginning. For example, if the OTP length is 6, and the user pastes "1234" after already entering "56" into the last two fields, the result would be "56".
• I'm wondering if this is the desired behavior, or if it would be better to handle partial pastes differently (e.g., only filling the available empty fields).
• I haven't implemented a fix for this yet, but I'm open to suggestions and contributions if anyone has ideas on how to best handle this scenario.

I believe the changes in sections 1 and 2 enhance the usability and robustness of the VOTPInput component. I'm open to any feedback or suggestions you may have on these changes, as well as thoughts on the partial paste behavior.

Thanks!

[johnleider]

Thank you for the detailed feedback.

1. Might be a bit too aggressive, maybe we can just trim the string?
2. Sounds good
3. I didn't take into consideration partial pastes, so any oddities there are unintended