react-input-mask icon indicating copy to clipboard operation
react-input-mask copied to clipboard

React does not recognize the `maskPlaceholder` prop on a DOM element.

Open matbrgz opened this issue 4 years ago • 16 comments

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 lowercasemaskplaceholder instead. If you accidentally passed it from a parent component, remove it from the DOM element.

How to solve this?

matbrgz avatar Apr 22 '20 12:04 matbrgz

I'm having the same problem

rafaelbrier avatar May 06 '20 04:05 rafaelbrier

Me too

PetrVasilev avatar May 06 '20 19:05 PetrVasilev

Using maskChar property instead of maskPlaceholder resolved the issue for me

EllisMin avatar May 08 '20 12:05 EllisMin

me too

ghost avatar May 11 '20 12:05 ghost

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?

MrBlue9 avatar May 27 '20 07:05 MrBlue9

I guess maskChar={null} should be used on v2. it got renamed to maskPlaceholder={null} on 3.0.0-alpha.0

gReis89 avatar Jun 16 '20 20:06 gReis89

I guess maskChar={null} should be used on v2. it got renamed to maskPlaceholder={null} on 3.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

fristyr avatar Jul 07 '20 10:07 fristyr

I had to lower the version to make it work https://www.gitmemory.com/issue/sanniassin/react-input-mask/216/654759302

dimakrsna avatar Nov 26 '20 14:11 dimakrsna

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 avatar Sep 12 '21 17:09 ivansolobear-ts

@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!

rajrajhans avatar Sep 13 '21 06:09 rajrajhans

Worked for me with this workaround, thank you @rajrajhans

ruchi-scaletech avatar Jun 28 '22 13:06 ruchi-scaletech

worked to me too @rajrajhans

LeoTomio avatar Aug 03 '22 13:08 LeoTomio

same, it worked for me @rajrajhans, thanks, a lot

JamDev0 avatar Sep 07 '22 18:09 JamDev0

why is my beforeMaskedStateChange not working

kaushal-cmyk avatar Jun 11 '24 11:06 kaushal-cmyk

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.

deangibson89 avatar Jul 19 '24 11:07 deangibson89