search

shatran / card-react

React component for card https://github.com/jessepollak/card
MIT License
133 stars 65 forks source link

Redux Bad Formatting #37

Open anushkadoyan opened 6 years ago

anushkadoyan commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

nope, just kinda moved on :/ sorry.