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)
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.