[BUG] Component crashes with chrome translations

[mo6zes]

Issue tracker is ONLY used for reporting bugs. New features should be discussed on our slack channel. Please use stackoverflow for supporting issues.

Version of the library: 1.4.2

Expected Behavior

OTPs are not translated, or if translated, the component does not crash

Current Behavior

When allowing alphanumeric OTP tokens and browser translation is turned on, the input is translated. For example the characted 'Y' is translated by chrome to 'VE' in Turkish. This crashes the component if a user backspaces a character that is translated into multiple characters.

Possible Solution

By default set translate="no" on the root element inside the otp component.
When backspacing, the component should not assume that every input contains just a single character.

Steps to Reproduce

1. Set pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
2. Ask chrome to translate to Turkish
3. Input the character 'y'
4. Hit backspace
5. Crash

[YassienW]

FYI, in order to fix this translate="no" should be added to the components that contain the characters, not the root component