Using with card-react delete on type behaviour

[aldarund]

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]

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]

@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]

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

[aldarund]

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

[foxhound87]

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]

@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]

I will try this component