viclafouch / mui-otp-input

📌 A One-Time Password input designed for the React library MUI
https://viclafouch.github.io/mui-otp-input
123 stars 25 forks source link

Mask Input values without the use of type="password" #50

Closed anoop-cq-ui closed 8 months ago

anoop-cq-ui commented 9 months ago

This would be good feature in scenario where we want to restrict the values to number and still keep the input masked. Right now if we want to mask the values we change the textfield input type to password which can allow any character.

In my codebase I have added a new prop called mask which can be boolean.

for eg. ControlledOTPInput is a wrapper component which I have created to make this component work with react-hook-form

<ControlledOTPInput name="pin" length={4} value={otpValue} onChange={handleChange} mask={hidePin} <--- new prop type="number" />

let me know if it makes sense ?

viclafouch commented 8 months ago

Hey !

Another solution : pass inputmode="numeric" to the textfield props. type is password. And then, in your onChange handler, convert your string into a number.

WDYT ?

anoop-cq-ui commented 8 months ago

your solution works but the problem is that the input password allows any characters (number, string, special characters) which in the conversion process might break your code. Or you will have to write extra logic to handle those scenarios which I think is an extra effort on the user of this reusable component.

well in my case I am using a simple fix by adding a class -

input.mask {
  -webkit-text-security: disc;
}

Feel free to close the issue if you feel otherwise. Thanks for all your efforts on creating this component !

viclafouch commented 8 months ago

Thanks for the solution !