fix: android backspace not working

[suleymanbariseser]

• What does this PR do?
  Fixes Backspace not working on android phones #388

• Any background context you want to provide?
  In android, event.code has no value if user click backspace. However, event.key has "backspace" value so instead of just checking event.code, event.key also must be checked.

• Screenshots and/or Live Demo
  

[prateek3255]

@suleymanbariseser, thanks for working on this. I think this code block is also not needed anymore, because this was added in v2 just to handle this case I believe

react-otp-input/src/index.tsx

Lines 105 to 113 in e7cc58e

	const { nativeEvent } = event;
	// @ts-expect-error - This was added previosly to handle and edge case
	// for dealing with keyCode "229 Unidentified" on Android. Check if this is
	// still needed.
	if (nativeEvent.data === null && nativeEvent.inputType === 'deleteContentBackward') {
	event.preventDefault();
	changeCodeAtFocus('');
	focusInput(activeInput - 1);
	}

Will give it a run, can you also check if any other cases in the handleKeyDown method need this as well?

[prateek3255]

@suleymanbariseser Were you able to make the changes here?

[suleymanbariseser]

@prateek3255 sorry for the delay, I checked it and it seems this condition does not work also;

else if (event.key === otp[activeInput]) {
  event.preventDefault();
  focusInput(activeInput + 1);
}

However, I think it is not possible to solve this problem by checking event object because keyCode is always 229 and key is "Unidentified"

[prateek3255]

Okay what could be the possible solution here?

[suleymanbariseser]

I think instead of comparing current value and pressed key, it would be better having a fallback condition which will move cursor to next input because it does not even work if I press a different key (on desktop browser) when I am focused at the end of the current input.

It does not work because handleChange will be triggered with a value like "xc" and isInputValueValid will return as false so it will not move forward.

if (isInputValueValid(value)) {
  changeCodeAtFocus(value);
  focusInput(activeInput + 1);
}

[divyanshu-srivastava-vs]

This bug is also raised in react thanks for the solution @suleymanbariseser. Please merge this pr as soon as possible. Need to make patch for the same.

[prateek3255]

Yeah you are right @suleymanbariseser when the input is selected, key and keyCode are unidentified and 229 respectively. So we'll have to figure out a different way handle this. But this PR at least partially solves the problem by selecting the last input on backspace. So bringing this in for the time being will open another issue for handling that edge case

[prateek3255]

@all-contributors please add @suleymanbariseser for bug

[allcontributors]

@prateek3255

I've put up a pull request to add @suleymanbariseser! 🎉