add raw value to target

[hosmelq]

Related #69

[aesopwolf]

@insin do you have any insight on this PR? Seems good to me

[iamdustan]

@aesopwolf @hosmelq the event object being mutated here with rawValue is a React SyntheticEvent. React uses event pooling and recycles the event objects passed through handlers. This would cause future event handlers to undesirably have a rawValue property.

[iamdustan]

Bah. I’m mostly wrong. This is mutating the DOM node with an added property. That feels a bit hackish..

[aesopwolf]

I agree, it does feel a bit hackish. Do you know what the downsides are? Or a good alternative?

There's a user-land solution outlined here #58 (comment)

[iamdustan]

My team hasn’t really had to consider this. We consider the Robustness Principle to carry a lot of weight in form design. Specifically, be liberal in what you accept from others. Masking is a user-experience concern. The server should be liberal in the format it accepts (e.g. it should accept (999) 888-7777, 9998887777, 999.888.7777, +1 (999) 888 7777, etc etc). Masking provides a specific format to communicate expectations to the user. If an API doesn’t accept a specific form then we strip the formatting out when sending the data.

[aesopwolf]

Thanks for sharing that link, I never knew there was a name/label for that idea.

What solution does your team use to "strip the formatting out when sending the data."? Is it just a manual process?

[aesopwolf]

What about setting an attribute data-rawValue on the DOM node itself?

1. Create a new method getRawValue on the MaskedInput class that returns el.getAttribute('data-rawValue')
2. Let users setup a ref and call this.refs.input.getRawValue()

[iamdustan]

@aesopwolf yeah. We have our form validation and cleansing functions together to keep them in sync and just import that at both our UI layer and network layers and run that over the data.