react-input-mask
react-input-mask copied to clipboard
React does not recognize the `maskPlaceholder` prop on a DOM element.
When I try to make this lib work with my design system components I get:
React does not recognize the
maskPlaceholderprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase
maskplaceholder instead. If you accidentally passed it from a parent component, remove it from the DOM element.
How to solve this?
I'm having the same problem
Me too
Using maskChar
property instead of maskPlaceholder
resolved the issue for me
me too
maskChar is accepted as prop, but it doesn't work as expected. when i use maskChar={null}
, the input still renders underscores as placeholders. using any other string value instead of null gives the same result, e.g. maskChar="-"
still renders with underscores. anyone else experiencing this behavior?
I guess maskChar={null}
should be used on v2. it got renamed to maskPlaceholder={null}
on 3.0.0-alpha.0
I guess
maskChar={null}
should be used on v2. it got renamed tomaskPlaceholder={null}
on3.0.0-alpha.0
Yes, but maskPlaceholder={null}
on 3.0.0-alpha.0
doesn't work, at least in my case (maybe I did something wrong).
So I removed alpha version and replace it with npm install react-input-mask --save
- "react-input-mask": "^2.0.4",
And maskChar={null} working fine at this version
I had to lower the version to make it work https://www.gitmemory.com/issue/sanniassin/react-input-mask/216/654759302
any news on that? working with maskChar doesn't give the wanted result , when i use maskChar={'dd/mm/yyyy'} for example it turns every char to it so it turns to "dd/mm/yyyydd/mm/yyyydd/mm/yyyydd/mm/yyyydd/mm/yyyydd/mm/yyyydd/mm/yyyydd/mm/yyyy".
as far as I understand it replaces every char to the string in maskChar. so this workaround does not work for cases where long string should replace long masks.
@ivansolobear-ts that happens if you use maskChar
. To get the behaviour you want, use maskPlaceholder
.
Note that you will have to install the 3.0.0-alpha.2
version which includes support for maskPlaceholder
. Uninstall the old version, and install the new one by doing yarn add react-input-mask@next
. Then, restart your dev server (CRA, in my case), and maskPlaceholder
will start working!
Worked for me with this workaround, thank you @rajrajhans
worked to me too @rajrajhans
same, it worked for me @rajrajhans, thanks, a lot
why is my beforeMaskedStateChange not working
Instead of using maskPlaceholder="dd/mm/yyyy"
I just used a standard placeholder (i.e. placeholder="dd/mm/yyyy"
) and while it does not function exactly the same - it got the job done.