Closed Kathuria closed 3 years ago
is this already solved?
Try this:-
<OtpInput onChange={handleChange} value={otp} placeholder="----" numInputs={4} isInputNum={true} inputStyle={{ color: "black", width: "2.5rem", height: "3rem", margin: "0 1rem", fontSize: "2rem", borderRadius: 4, border: "1px solid rgba(0,0,0,0.3)", }} />
I noticed placeholder not working and getting console error - Length of the placeholder should be equal to the number of inputs.
Its working on initial load because default value i.e. numeric 4 is taken but after that changes to string from input fields.
On further analysis, found its broken only when numInputs changed from provided demo fields. The demo although marked to accept "number" but returns a string value. HTML Input elements are documented to return string representing a number. See the documentation here
On other places like isLastChild={i === numInputs - 1} its working due to type conversion, 10 - '1', returns 9.
Note: Please check other places, according to me its not impacted
Steps to reproduce the issue: Update number in input field, after change input number count - Try adding placeholder.
Relevant error messages and/or screenshots: Length of the placeholder should be equal to the number of inputs.