Place Holder not visible react-number-format

Question

Current behavior

Place holder is not visible for phone number mask

Expected behavior

Place holder to be visible and on focus the input format and mask to be applied while user is entering data

CodeSandbox link illustrating the issue

https://codesandbox.io/s/kind-jang-0wmx3i?file=/src/App.js

Please check the browsers where the issue is seen

• [Version 98.0.4758.109 (Official Build) (x86_64) ] Chrome

Answer 1

It's because you have allowEmptyFormatting ={true}, which will format the box when empty and thus override the placeholder. Docs

You can see the placeholder if you set it to false. So confirming its a config output and not related to any browser

allowEmptyFormatting ={false}