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

[anoop-cq-ui]

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]

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]

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]

Thanks for the solution !