Keep part of the mask while typing

[kirillzyusko]

Is your feature request related to a problem? Please describe.

I have credit card input. And my mask looks like: [0000] [0000] [0000] [0000].

Ideally I'd like to show symbols, like XXXX XXXX XXXX XXXX (or any others, maybe 0000 - ideally should be configurable) as a placeholder, so when user types a message, he can still see a part of mask.

Describe the solution you'd like

I haven't thought about the possible API yet. In my head I see next solutions:

1️⃣ To use placeholder and add new property indicating that it should be combined with mask

So the API could look like:

<MaskedTextInput
  autocomplete={false}
  mask="[0000] [0000] [0000] [0000]"
  placeholder="XXXX XXXX XXXX XXXX"
  // this is a new property
  keepPlaceholderPartially // or keepPlaceholderWhileTyping
  value={phoneNumber}
  onChangeText={onChangeText}
  keyboardType="numeric"
/>

2️⃣ To add new props useMaskAsPlaceholder and keepPlaceholderWhileTyping

The useMaskAsPlaceholder will tell, that placeholder will be prepared automatically based on mask content (though the question how to replace mask symbols with custom one (0 -> X) is still open.

Second property will tell, that we should keep part of placeholder while typing.

Note

I don't like this solution, because it's a way to shoot in your foot. You can specify placeholder and specify useMaskAsPlaceholder. And it's kind of two ways to achieve the same.

3️⃣ A more generic

Don't have a final picture yet, but maybe we can design a solution, that will allow to make even more customization. Probably a very rare case, but maybe some users will want to apply different styling to parts of placeholders. For example 4 fully typed numbers in credit card mark as green, currently typing numbers (let's say 12 in 12xx) show in black color, and remaining palceholder (XXXX) show in gray color.

Sorry, the idea is very rough, but just want to forecast future needs so that we can design enhanceable API 🙂

Describe alternatives you've considered

There is no alternatives at the moment. I don't have a references to native apps that allow to do that. But on web you can see such feature on many websites, for example: https://text-mask.github.io/text-mask/

Additional context

Open for discussions. If any help is needed from my side - let me know 😊