renato-bohler/redux-form-input-masks

The default value of the createNumberMask is 0 and can not be changed

shchouch opened this issue · 8 comments

shchouch commented

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 the createNumberMask mask applied to a Field this Field renders with '0' by default.

What is the expected behavior?

Is it possible to add some additional property to the object that is passed to the createNumberMask that will set the initial or default value or just leave the input blank? So that by default there would be no '0's or any other numbers. Just empty input.

Sandbox Link

What's your environment?

Version: 1.0.1
OS: Linux Ubuntu 17.10 64-bit
Browser: Chrome 65 (64 bits)
Node version: 9.2.0

renato-bohler commented

Hey! Thanks for taking your time and submitting this feature request.

So... this feature is on the roadmap, but I'm currently lacking time to work on the project.

As soon as I have the time, I'll prioritize the existing issues and then I'll work on this feature.

  • ❤️1
renato-bohler commented

Closed by #30

Deleted user commented

Hi, @renato-bohler is there a way to hide 0 from the createNumberMask?
I've got this code but can't get my head around on how I can hide 0?

As I am getting $ 0 per month
What I want is $ per month

export const currencyMask = createNumberMask({ prefix: '$ ', suffix: ' per month', decimalPlaces: 0, locale: 'en-US', });

renato-bohler commented

Hi, @renato-bohler is there a way to hide 0 from the createNumberMask? I've got this code but can't get my head around on how I can hide 0?

As I am getting $ 0 per month What I want is $ per month

export const currencyMask = createNumberMask({ prefix: '$ ', suffix: ' per month', decimalPlaces: 0, locale: 'en-US', });

Hmm not that I'm aware of. Probably the only way to achieve this behavior would be tracking the value of the field and applying different masks based on it, or something like that.

Deleted user commented

@renato-bohler can you please have a look this code sand box link?
Codesandbox
All I want is to avoid having 0 on load

renato-bohler commented

@renato-bohler can you please have a look this code sand box link? Codesandbox All I want is to avoid having 0 on load

Sure, so here's what I mean: https://codesandbox.io/s/createnumbermask-forked-tipy0?file=/CreateNumberMask.jsx

It's a little bit hacky... but hey, it gets the job done 😅

rfim

Also, if you want to go back to $ 0 per month when the user deletes the field, you can use

{...(fieldValue !== undefined ? numberMask : textMask)}

Instead of

{...(fieldValue ? numberMask : textMask)}
Deleted user commented

Nice solution, thank you @renato-bohler .

By the way I solved it differently by adding a placeholder and keeping allowEmpty: true,
Also I am using material UI and I had to add some extra props to get things done

Sorry for troubling you.

renato-bohler commented

Well that seems like a better solution hehe