search

CraveFood / farmblocks

React components for building web projects.
https://cravefood.github.io/farmblocks/
MIT License
20 stars 5 forks source link

input hoc causes warnings when appllied to Stripe's CardElement component #186

Open fczuardi opened 6 years ago

fczuardi commented 6 years ago

The current input hoc adds some properties to the wrapped component regardless of if this properties where passed or not. Examples of such properties are disabled and onInvalid.

Other handlers are always passed as well, regardless of if they were provided or not, like onChange, onFocus and onBlur. They all have default values.

This is not a problem for input components, as they share those attributes, but for other React components that don't expect those properties, this can be a problem.

For example, the CardElement from https://github.com/stripe/react-stripe-elements does accept and expect onBlur, onFocus, onChange, className and some others, but it treats all remaining properties as options for the https://stripe.com/docs/stripe-js/reference#stripe-elements call. This causes this console.warning messages related to the unexpected properties of disabled and onInvalid.

screen shot 2017-12-26 at 5 45 47 pm

Unrecognized element.update() parameter: disabled is not a recognized parameter. This may cause issues with your integration in the future.

Unrecognized element.update() parameter: onInvalid is not a recognized parameter. This may cause issues with your integration in the future.
fczuardi commented 6 years ago

Maybe we should also file feature requests to stripe, for them to support onInvalid event handlers and to support a disabled option on their API. But from our side, we should maybe only forward to the underlining component, attributes that were passed in the first place, and not always assume that the underlining component is a form input and add the disabled flag and the event handler properties.