Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: mobile autofill from native suggestion #428

Merged
merged 2 commits into from
Dec 12, 2023
Merged

fix: mobile autofill from native suggestion #428

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
35d5bad
fix: mobile autofill from native suggestion
hogiyogi597 Nov 2, 2023
fa633b4
Merge branch 'devfolioco:main' into fix-mobile-autofill
hogiyogi597 Dec 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 16 additions & 4 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ type InputProps = Required<
| 'onKeyDown'
| 'onPaste'
| 'aria-label'
| 'maxLength'
| 'autoComplete'
| 'style'
| 'inputMode'
Expand Down Expand Up @@ -114,15 +113,29 @@ const OTPInput = ({

const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const { nativeEvent } = event;
if (!isInputValueValid(event.target.value)) {
// @ts-expect-error - This was added previosly to handle and edge case
const value = event.target.value;

if (!isInputValueValid(value)) {
// Pasting from the native autofill suggestion on a mobile device can pass
// the pasted string as one long input to one of the cells. This ensures
// that we handle the full input and not just the first character.
if (value.length === numInputs) {
const hasInvalidInput = value.split('').some((cellInput) => !isInputValueValid(cellInput));
if (!hasInvalidInput) {
handleOTPChange(value.split(''));
focusInput(numInputs - 1);
}
}

// @ts-expect-error - This was added previously 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);
}

// Clear the input if it's not valid value because firefox allows
// pasting non-numeric characters in a number type input
event.target.value = '';
Expand Down Expand Up @@ -238,7 +251,6 @@ const OTPInput = ({
onKeyDown: handleKeyDown,
onPaste: handlePaste,
autoComplete: 'off',
maxLength: 1,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it necessary to remove maxLength for this to work? Hoping it does not break other cases where you paste an arbitrary value

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, unfortunately with the maxLength of 1 it is truncating the rest of the input. Are there some scenarios you'd like me to test? I'd be happy to help in any way I can.

'aria-label': `Please enter OTP character ${index + 1}`,
style: Object.assign(
!skipDefaultStyles ? ({ width: '1em', textAlign: 'center' } as const) : {},
Expand Down