Closed rijans closed 1 year ago
@rijans With v3 you have the full control of the input you are rendering so you can add this prop to the input yourself, like this:
<OtpInput
value={otp}
onChange={setOtp}
numInputs={4}
renderSeparator={<span>-</span>}
renderInput={(props) => <input {...props} autocomplete="one-time-code" />}
/>
I am getting a typscript error when I try that on the autocomplete attribute.
Type '{ autocomplete: string; onChange: ChangeEventHandler
; onBlur: FocusEventHandler ; ... 11 more ...; type: AllowedInputTypes; }' is not assignable to type 'DetailedHTMLProps<InputHTMLAttributes , HTMLInputElement>'. Property 'autocomplete' does not exist on type 'DetailedHTMLProps<InputHTMLAttributes , HTMLInputElement>'. Did you mean 'autoComplete'?ts(2322)
So I tried autoComplete="one-time-code"
. No typescript error and it worked.
https://developer.mozilla.org/en-US/docs/Web/API/WebOTP_API https://developer.chrome.com/en/articles/web-otp/ https://developer.chrome.com/blog/cross-device-webotp/