Comments (3)
@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.
from card-react.
@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.
from card-react.
nope, just kinda moved on :/ sorry.
from card-react.
Related Issues (20)
- Payment.js is still used as pre-built instead of source (?) HOT 8
- Formatting not working in mobile browser
- npm run fails requiring global ruby/sass HOT 2
- Changing styling?
- Does not build under webpack HOT 11
- is there a way to separate out the expiration fields? HOT 1
- Entering every 4th digit doesn't trigger onChange HOT 7
- initialValues don't re-render HOT 2
- When you focus on the cvv field, the card flips but the back side of the card dissapears HOT 3
- Incomplete event handling missing input fill in from browser suggestion popup HOT 2
- Using with stripe.js HOT 2
- missing last digit of card number HOT 5
- Incompatible with redux HOT 2
- Identify card type HOT 3
- React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement. HOT 1
- card-react failed to build with node 6.11.x
- HTML encoding for default values that include '••••' is not working for React ^0.14.3 HOT 4
- How to get input values? HOT 2
- Sass error on build
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from card-react.