background color on the last otp input. #425

Activity

1. guilherme-oliveira-trybe commented on Oct 31, 2023

   

   guilherme-oliveira-trybe

   on Oct 31, 2023

   More actions

   i have the same problem and i try to fix with css properties on my input but not working

   👍React with 👍1Reacted by Mehmet Özkan
2. itz-saran commented on Nov 1, 2023

   

   itz-saran

   on Nov 1, 2023

   More actions

   @ayobamiseun same here any updates on how you fixed it ?

   👍React with 👍1Reacted by Mehmet Özkan
3. CCoder23 commented on Nov 4, 2023

   

   CCoder23

   on Nov 4, 2023

   More actions

   i think on focusInput if we comments out selecting the input it works: i mean this line inputRefs.current[activeInput]?.select();
4. ayobamiseun commented on Nov 5, 2023

   

   ayobamiseun

   on Nov 5, 2023

   Author

   More actions

   i think on focusInput if we comments out selecting the input it works: i mean this line inputRefs.current[activeInput]?.select();

   where can this be done
5. devlopersabbir commented on Dec 27, 2023

   

   devlopersabbir

   on Dec 27, 2023

   More actions

   I fixed this problem on this pull request #432
6. jethrolibutan commented on Dec 27, 2023

   

   jethrolibutan

   on Dec 27, 2023

   More actions

   i think on focusInput if we comments out selecting the input it works: i mean this line inputRefs.current[activeInput]?.select();

   where can this be done

   hello, was this ever solved?

   👀React with 👀1Reacted by Mehmet Özkan
7. ianjojo commented on Aug 31, 2024

   

   ianjojo

   on Aug 31, 2024

   More actions

   still seems to be an issue, any word on this?
8. AlexSapoznikov commented on Mar 4, 2025

   

   AlexSapoznikov

   on Mar 4, 2025

   Last edited by AlexSapoznikov

   More actions

   It is because last input keeps focus. Here is how I solved it:

      const NUM_INPUTS = 6
   
      <OtpInput
           value={code}
           onChange={onChangeCode}
           numInputs={NUM_INPUTS}
           renderSeparator={<span>&nbsp;&nbsp;</span>}
           renderInput={(props, index) => (
             <input
               {...props}
               onChange={(e) => {
                 props.onChange?.(e);
   
                 // Last item changed.
                 if (index === NUM_INPUTS - 1) {
                   (e.target as HTMLInputElement)?.blur();
                 }
               }}
             />
           )}
           shouldAutoFocus
         />