Hello Chin,

I believe that you have selected the wrong forge asset.

[Input Mask React] is based on github.com/RobinHerbots/Inputmask and not the site you've added a screen shot from https://imask.js.org

I would recommend depending on a forge component that's based on IMask js

Check the behavior in this test screen and let me know if this is what you've wanted
SecurePatternIMaskDemo

I've used iMask Js forge component but I've customized it a little bit to add support for custom definitions

The current IMask Js forge component doesn't support custom definitions, which you need in order to create the same secure pattern in the example.

That's why I've modified the forge component by making it accept a 2 new input parameters (custom definitions, overwrite)

I've attached the modified iMaskJs_PAT.oml in the previous message.

If you don't want to use the oml I've attached I'd recommend modifying the forge component yourself or asking the owner of the component to add that feature.

By modifying the CustomMask block and adding 2 new input parameters (CustomDefinitions, Overwrite) and using them in the Mask_Initialize client action inside the javascript code.
You can pass them into the IMask object constructor like the attached screenshot and now the CustomText block will support the taking Definitions and overwrite input variables. 

And as You can see in the SecurePatternIMaskDemo.oml I'm using the CustomText block and sending 'shift' into the overwrite input parameter and sending the output of GetSecureCustomDefinitions function to Custom Definitions

Inside the GetSecureCustomDefinitions function you'll find me initializing the Definition object with the same parameters that are defined in the example on the IMask Js website