Placeholder not updating after initial numInputs changes

[Kathuria]

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.

[ingOmarG]

is this already solved?

[ujjwal-shrivastava]

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)", }} />