8

I'm using a multi input component for capturing MFA codes. Think six identical boxes and as you type - it moves to the next one with an auto submit on completion.

We handle paste logic uniquely by filling in the code one at a time from the beginning which works really well and lets the user paste into any input field.

The issue is that when using a google keyboard (GBoard - native to Pixl phones) - the clipboard feature seems to not trigger an actual paste but instead tries to fire some sort of onChange event or series of onChange events.

So for instance if you have 123456 in your clipboard and you press the clipboard button, the change handler fires with "1" rather than an onPaste of "123456".

I was wondering if anyone had run into similar issues and how you navigated it. I've looked into the navigator.clipboard route - but this requires the user being prompted for permissions, and I would still need to uniquely identify the user keyboard since this would trigger for normal copy pastes (which work correctly)

dyouberg
  • 2,206
  • 1
  • 11
  • 21
  • It sounds like it is just typing in the code instead of triggering a paste event. It seems like acceptable behavior, since the paste was initiated from GBoard, if I'm understanding correctly. So the question is, why is this an issue for your code? I'm guessing it does not jump to the next box? It seems like your Javascript code can't handle an MFA code that is "typed" too quickly? Perhaps this could be resolved by using one text field that is styled to look like 6 boxes. – Codebling Jan 05 '22 at 18:31
  • Hitting the same issue, works well in PC browser and Safari, except Android browser, it is really inconvenient, if it is a clipboard/paste operation, it should trigger paste event instead of insertText – ravin.wang Sep 21 '22 at 06:41

1 Answers1

1

My coworker found out a solution to have specific handleChange behavior equal to the handlePaste behavior when e.target.value.length is equal to the codeLength (indicating a paste from gBoard in this instance). Hope this helps anyone else who may run into this issue.

dyouberg
  • 2,206
  • 1
  • 11
  • 21
  • My version of this was to have an onInput handler: If `e.data.length` was equal to the number of digits of my separated input fields, I would fill in the rest of the input fields. I just needed to make sure that each digit input field had no max-length because the Android Gboard paste would input all digits in 1 go. – syciphj Aug 11 '23 at 08:56