Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using with card-react delete on type behaviour #302

Open
aldarund opened this issue Jul 18, 2017 · 7 comments
Open

Using with card-react delete on type behaviour #302

aldarund opened this issue Jul 18, 2017 · 7 comments

Comments

@aldarund
Copy link

When using with https://www.npmjs.com/package/card-react it behave pretty strange. For example for card number starting from second quarter it start to delete number as you type. See video:
https://www.dropbox.com/s/x87zwaxwqf2ju6x/2017-07-19_02-02-10.mp4?dl=0
But if you type fast enough it doesnt delete.
Form is pretty simple

const fields = {
    name: {
        label: 'Full Name',
    },
    card_number: {
        label: 'Card Number',
    },
    exp: {
        label: 'Expiration Date',
    },
    cvc: {
        label: 'Security Code',
    }
};
class PaymentForm extends MobxReactForm {

    onSuccess(form) {
        // some success logic here
    }

    onError(form) {

    }
}

const form = new PaymentForm( {fields} );

It start behave like this as soon as i add {...form.$('card_number').bind(bindProps)} to the input it start behave like this. If i remove binding - all fine.
Is there a way to make it work?

@foxhound87
Copy link
Owner

Please show your bindings (bindProps).

The bind() method calls the default input bindings. So maybe you need to create a custom binding for your custom component/input. Take a look here: https://foxhound87.github.io/mobx-react-form/docs/bindings/custom.html

@aldarund
Copy link
Author

@foxhound87 im not sure how custom binding will help. The input is not a custom component. card-react just use a plain input fields. e.g.

<CardReactFormContainer container="card-wrapper" >
  <form>
    <input placeholder="Card number" type="text" name="CCnumber" />
  </form>
 </<CardReactFormContainer>

@foxhound87
Copy link
Owner

What are you passing to the bind() method as bindProps ?
Try to provide that props to the fields definition instead.

@aldarund
Copy link
Author

@foxhound87 in this usecase it just an empty dict. e.g. {...form.$('card_number').bind({})}

@foxhound87
Copy link
Owner

foxhound87 commented Jul 19, 2017

What happens if you remove the card-react component and leave just the input? If it works then it means that the card-react component has its internal state management which is not compatible with the mobx stores of mobx-react-form package. In that case, you need to find a workaround.

@aldarund
Copy link
Author

@foxhound87 well obviously it works without card-react :) basically it just traversing input and react.cloneElement them with events
https://github.com/shatran/card-react/blob/master/src/components/card-react-form-container.cjsx#L79

so this wont work with mobx form?

@foxhound87
Copy link
Owner

I will try this component

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants