Redux Bad Formatting

[anushkadoyan]

When used with Redux Form Fields, the formatting is glitchy. When I type in the credit card number, for example, on the 5th digit the numbers get deleted while typing.

[mostlyharmless2024]

@shatran any thoughts on this?

Having the same issue, only happens if my inputs are state controlled... I'm using Semantic UI React in my example (i'm don't think that's related though):

<Input type="text" placeholder="cc number" name="ccNumber" value={ccNumber} onChange={this.handleChange} />

My "handleChange" method simply sets the state of "ccNumber" to the value entered. When formating="true" is set on <CardReactFormContainer /> it appears to wrestle for control of the input.

This appears to only affect "formatted" fields "number" and "expiry"

Edit-
Dumping this.state.ccNumber to my console during render shows the card number updating with each keystroke until i hit a space (from the formatting/mask)... then if i keep pressing the same number it just "deletes" it, however if i press a different number then it starts working again.

Edit x2-
Sorry, working too late... Digging into the code a bit, i'm 99% sure this is something to do with the "Payment" library and how it handles the mask (formatting) on the fields. Reading their docs it looks kinda contrary to the React philosophy regarding updating the dom.

[jd4d]

@brendonlamb Did you come to any conclusions regarding this? I'm actually hitting the same block.

formatting the fields seems convenient and is kind of the reason for using something like this.

[mostlyharmless2024]

nope, just kinda moved on :/ sorry.