Adding a mask overrides the Field's format function

[scottmcpherson]

What are you reporting?

Adding a mask overrides the Field's format function

• Bug
• Feature request
• Code refactor
• Continuous Integration (CI) improvement
• Changes in documentation (docs)
• Other (describe)

What is the current behavior?

When you add a format function before the mask, the mask overrides the form. In my case, I need to convert a decimal value, e.g. 0.70 to a whole number for percentage formatting:

<InputField
        name="ltv"
        label="Loan To Value (LTV)"
        validate={[required]}
        format={value => {
          console.log('called here')
          return Math.floor(value * 100) || 0
        }}
        parse={value => {
              const float = parseFloat(value)
              return (float / 100).toFixed(6)
        }}
        {...percentageNumberMask}
/>

In this case, InputField is just redux form Field, and percentageNumberMask is a custom mask to show a percent sign. My format function never gets called. Looking through the code, I don't see a way to hook into the mask to do my calculations.

[renato-bohler]

This library does implement format and parse from redux-form's API. So the only way I can see that we could meet your requirement is by adding a new option to the createNumberMask function, called multiplier or something along those lines (so you could use multiplier = 1/100 in that case).

[scottmcpherson]

Something like a multiplier, or possibly even passing in a format function as one of the argument might be cool.

This actually isn't as big of an issue as I originally though, and really boiled down to the way we were parsing data. We we're able to work around it by feeding the input with initialValues in there modified state.

Feel free to close this one if you want, or if you think it would be valuable, I would be happy to take a look at it when I get some free time.

[renato-bohler]

I don't think that passing a format function would be a good feature, because this way the library user could easily break the format and parse cycles implemented by redux-form-input-masks.

The multiplier option seems to be a useful feature (specially for percentage values) and it would be fairly easy to implement.

[renato-bohler]

I'll publish the multiplier option in the next 2 or 3 days 😄

[renato-bohler]

🎉 This issue has been resolved in version 1.2.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀