MaskedTextField with validation

[RMY1]

Hi.

I am using MaskedTextField with validation. Setting state via setState inside of onGetErrorMessage handler causes neverending rerendering of maskedtextfield.

However, when the same(handlers) applied to simple textfield, all works great. It makes using of MaskedTextField impossible (

Pls take a look at this example. PS sorry for the quality, but I hope general idea should be clear.

https://codepen.io/Mygaluk/pen/RBBdOq

Thanks in advance

[natalieethell]

Hey @RMY1! I just took a look at your CodePen and I was able to dismiss the alert with no issues and continue typing in the masked text field by removing the prop validateOnFocusOut.

I think that this prop is causing _validate to be called every time you try to close the alert message, which then in turn calls your OnGetErrorMessage. Let me know if this solves your issue.

Thanks!

[RMY1]

Hi Natalie.

Thanks for the help. I am not sure whether https://codepen.io/Mygaluk/pen/RBBdOq?editors=1111 can be used as an example(not sure it works fine).

Not sure what has changed, but it seems setState doesn't work when calling from OnGetErrorMessage.

Let me explain what I have and what I need: There are couple of textfields(maskedtextfields) on the page. Once focus is out, validation should be performed. Validation should be also performed from outside(there is some button, which should perform validation as well). It(validation from outside) is done by setting state ErrorMessage.

Probably I could call _validate method manually when validating from outside(instead of setting state), so I avoid using errorMessage and onGetErrorMessage at the same time(right now it has the problem I am trying to explain).

I hope it makes sense...

Thank you in advance

[JasonGore]

I think there are a couple of issues here:

1. The CodePen you provided wasn't properly binding the callback, which means this was incorrect and setState as you expect it actually wasn't getting called. Check this CodePen for a version that fixes this issue.
2. With the fixed CodePen the difference in behavior between TextField and MaskedTextField is a little more clear. It appears that MaskedTextField is not properly observing the validateOnFocusOut prop and is calling _onGetErrorMessage as user input changes.

[RMY1]

Hi Jason.

Thank you for your reply. Yes, I missed binding (

Would be nice if you could fix it. Thanks!