sanniassin / react-input-mask

Input masking component for React. Made with attention to UX.
MIT License
2.23k stars 256 forks source link

Maximum update depth exceeded #291

Open allaniftrue opened 2 years ago

allaniftrue commented 2 years ago

Hi, Anyone encountered this issue?

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

osterreich commented 2 years ago

Facing the same issue only when trying to use autofill in Chrome for iOS. On all desktop browsers as well as on Android everything works fine.

yilunc commented 2 years ago

Same here, but when trying to call form.resetFields() with AntD forms

ffurkk commented 2 years ago

I also have same problem, it's crashing when trying the use autofill in chrome at ios device

azamatsmith commented 2 years ago

I'm also having this issue when refilling a form with previously entered data.

apolaert commented 2 years ago

I also have same problem with props "children" used with Input component of antd

Revolt9k commented 2 years ago

I also have same problem with custom input based on MUI TextField. Problem crash app on focus.

hahatulk commented 1 year ago

fix please

hahatulk commented 1 year ago

i found temporary fix, you need to define value to string always, do not allow null or undefined

<InputMask .... value={props?.value ?? ""}> .... </InputMask>

danielhusar commented 1 year ago

The above fix doesnt work for me, so I had to fork the repo and patch it. This is the change that works for me: https://github.com/sanniassin/react-input-mask/pull/309

ethanrcohen commented 1 year ago

Was seeing this issue as well in our production application as well, although from logging, it seems to have stopped occurring about four weeks ago. My guess is that this chrome release may have fixed the issue as I'm unable to replicate it now

@danielhusar did you see this resolve itself also? curious why you closed the PR linked above

Ryanjso commented 1 year ago

We're having this issue on latest version of chrome mobile when autofilling

danielhusar commented 1 year ago

Was seeing this issue as well in our production application as well, although from logging, it seems to have stopped occurring about four weeks ago. My guess is that this chrome release may have fixed the issue as I'm unable to replicate it now

@danielhusar did you see this resolve itself also? curious why you closed the PR linked above

I closed it as I dont think its will get merged. The repo looks unmaitaned. We are manually patching the library with fix in my PR to fix it for us.

Ryanjso commented 1 year ago

Switched my phone inputs over to https://github.com/uNmAnNeR/imaskjs/tree/master/packages/react-imask and it works flawlessly. Mobile autocomplete works great too.

fred-boink commented 1 year ago

Also experiencing the crash, @sanniassin can you validate @danielhusar fix and update the package?

joelsantosjunior commented 1 month ago

I fixed this problem using an immediate timeout to postpone the change/render.

mask={mask}
value={initialValue}
...
onChange={(event) => {
  const { value } = event.target;
  setTimeout(() => {
    onChange(value);
  });
}}