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.

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

In IOS OTP is not getting focus, when the otp comes we copy it and then from keyboard we push, it doesn't get filled !! #14

Open
visheshsprinzo opened this issue Mar 25, 2021 · 16 comments
Assignees
Labels
enhancement New feature or request

Comments

@visheshsprinzo
Copy link

No description provided.

@naveenvignesh5
Copy link
Owner

Paste into text input automatically not yet developed. Will be pushing it in the next release. Thanks for the input @visheshsprinzo.

@naveenvignesh5 naveenvignesh5 added the enhancement New feature or request label Mar 25, 2022
@naveenvignesh5 naveenvignesh5 self-assigned this Mar 25, 2022
@shivam0831
Copy link

shivam0831 commented May 31, 2022

@naveenvignesh5 any updates? I am using an android device still not able to paste code into text inputs

@yousefamar
Copy link

This seems to be something quite fundamental, and the reason I used this lib rather than writing my own. Too bad that it's not implemented. Switching to https://github.com/tttstudios/react-native-otp-input which seems to have it

@pgpankajgoyal
Copy link

Do we have any update regarding this issue fixes ?

@pgpankajgoyal
Copy link

This seems to be something quite fundamental, and the reason I used this lib rather than writing my own. Too bad that it's not implemented. Switching to https://github.com/tttstudios/react-native-otp-input which seems to have it

Hi yousefamar

As I was looking into this https://github.com/tttstudios/react-native-otp-input sdk it's 2 years old, is it working fine with latest react native version ?

@yousefamar
Copy link

@pgpankajgoyal I'm still using it in production, with latest react-native. However, the latest version (1.3.11) is broken (tttstudios/react-native-otp-input#87), but I simply froze it at 1.3.7 which works fine for now.

@naveenvignesh5
Copy link
Owner

naveenvignesh5 commented Jan 22, 2023

@yousefamar @shivam0831 did you try this example for your use case ? If so what blockers are facing with regards to below way of implementing OTP pre-fill.

// hooks
import React, { useRef } from 'react';

const ParentComponent = () => {
    const otpInput = useRef(null);

    const clearText = () => {
        otpInput.current.clear();
    }

    const setText = () => {
        otpInput.current.setValue("1234");
    }

    return (
        <View>
            <OTPTextInput ref={e => (otpInput = e)} >
            <Button title="clear" onClick={clearText}>
        </View>
    );
}

@rahul-shirur
Copy link

@naveenvignesh5 Is there any plan for release this enhancement?

@keshavsharma0712
Copy link

@naveenvignesh5 I want to auto-fill the otp fields when i click on the otp suggestion from keyboard in iOS. Can you please tell how to achieve this?

@anniewey
Copy link

anniewey commented Jan 19, 2024

@naveenvignesh5 hi, looking for this enhancement too.
in my case, my text was autofill to the first input only, which i suspect is because of the OTPTextInput is split to 6 text inputs?

@shashankmeddo1
Copy link

any update on this?

@omivrex
Copy link

omivrex commented Apr 25, 2024

+1

@anniewey
Copy link

anniewey commented Apr 26, 2024

This enhancement actually has been released in v1.1.1 using handleCellTextChange. Check the example for the complete source code.

import OTPTextView from 'react-native-otp-textinput';
import Clipboard from '@react-native-clipboard/clipboard';

const handleCellTextChange = async (text: string, i: number) => {
    if (i === 0) {
      const clippedText = await Clipboard.getString();
      if (clippedText.slice(0, 1) === text) {
        codeRef.current?.setValue(clippedText, true);
      }
    }
  };

<OTPTextInput
            ref={codeRef}
            handleCellTextChange={handleCellTextChange}
            ..
/>

Update:
Notice that this only work with copy pasting but not with AutoFill button in iOS.
@naveenvignesh5 do u have any idea how to implement to same thing via iOS AutoFill button?

@harshithvemulas
Copy link

Any solution for this issue ?

@sudhanshu-busy
Copy link

sudhanshu-busy commented Jul 2, 2024

This enhancement actually has been released in v1.1.1 using handleCellTextChange. Check the example for the complete source code.

import OTPTextView from 'react-native-otp-textinput';
import Clipboard from '@react-native-clipboard/clipboard';

const handleCellTextChange = async (text: string, i: number) => {
    if (i === 0) {
      const clippedText = await Clipboard.getString();
      if (clippedText.slice(0, 1) === text) {
        codeRef.current?.setValue(clippedText, true);
      }
    }
  };

<OTPTextInput
            ref={codeRef}
            handleCellTextChange={handleCellTextChange}
            ..
/>

Update: Notice that this only work with copy pasting but not with AutoFill button in iOS. @naveenvignesh5 do u have any idea how to implement to same thing via iOS AutoFill button?

if i copy code and the code is 1234 and I am going to type 1 on 1st block then function will run and it will autofill.
I means to say that on every time i change text it gonna copy the clipboard text .
i want only to paste the copied text when I press the paste button not on changing the text.

@shafqatbari
Copy link

#45 (comment)
using Clipboard is not a valid solution

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

14 participants