NumberMask: erroneous behavior when using allowEmpty with initialValues

[renato-bohler]

What are you reporting?

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

What is the current behavior?

When a Field which has an initial value is using a number mask with the allowEmpty option set, it is not possible to set the input value to zero. Also, in this case, instead of setting the Field's value to undefined, it sets to an empty string.

What is the expected behavior?

We should be able to set the Field to 0 in this case and the value when the input is empty should be undefined or null.

Sandbox Link

https://codesandbox.io/s/n4k073xzj

What's your environment?

Version: 1.1.3

Other information

This is related to redux-form/redux-form#3946. The only viable way to fix it is changing may be changing the normalize's return to null for allowEmpty (which makes more sense to me), but this may be a breaking change.

[mitchvoll]

redux-form-input-masks/src/createNumberMask.js

Line 106 in 31b214d

return '';

This returns an empty string for the normalize function if allowEmpty is set. The API docs say that if allowEmpty is set then undefined will stored. Could this be part of the issue?

[renato-bohler]

@mitchvoll redux-form's change action will not set the Field value to undefined if its payload is undefined (in fact it will do nothing if that's the case). One way to set undefined to the Field with this action is to set the payload to an empty string, but that only works if the target Field has no initial values - and that's the cause of this issue.

There's more information here: redux-form/redux-form#3946 (comment).

I think the only way to really solve this for the current version of redux-form is to set the value to null instead of undefined (the change action will set to null if the payload is null), but that will cause a breaking change.

[renato-bohler]

🎉 This issue has been resolved in version 2.0.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀