React-number-format: Show mask after focusing the input

[everlasting-neverness]

Hello, can you help me please?

Is there a way to show mask (and put the caret to right position) when we just focus on input? And then if we focus out the input, hide the mask? Or the is an option just to always show mask?

I need to format phone number with '+7 (###) ###-####' mask, but when i focus on the input it shows no mask and only after user starts typing the mask appears and put user's value in the (###) field.

My goal is to achieve the next: always show the user that "+7" is already set, and he will start his input inside (###), when he is focusing the input.

[s-yadav]

Humm, the requirement makes sense. I will see if we can incorporate this in the library.

[iloveip]

This feature is really needed. That's the only reason I have to use one more library for phone masks.

[s-yadav]

@iloveip @everlasting-neverness
I forgot. This prop is already present. Set allowEmptyFormatting to true.
https://github.com/s-yadav/react-number-format#props

I will add it in examples and codepen as well.

[iloveip]

@s-yadav Thank you. But then the mask is always shown. Is there any way to show it only on focus?

[LeComptoirDesPharmacies]

Hi @s-yadav and @iloveip,

Same request here, being able to display mask only when input focused or have value would be really user friendly.

Yours faithfully,
LCDP