Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement a robust number field #43

Open
hallcountymis opened this issue Sep 18, 2019 · 3 comments
Open

Implement a robust number field #43

hallcountymis opened this issue Sep 18, 2019 · 3 comments

Comments

@hallcountymis
Copy link

Is your feature request related to a problem? Please describe.
It is difficult to customize the existing implementation of a number field (which is using Input with type number).

Describe the solution you'd like
Implement a standalone number field, perhaps using react-number-format

Describe alternatives you've considered
I began this request as a currency field but I feel like a more flexible number field would be more widely beneficial

@KaiHotz
Copy link
Owner

KaiHotz commented Sep 18, 2019

@hallcountymis flexible sounds good but could you please describe your issue in more detail e.g: what you are trying to accomplish and maybe give a code example ?

The actual <Input /> component accepts all parameters a normal html input accepts as well. so you can configure it as you need.

@hallcountymis
Copy link
Author

hallcountymis commented Sep 18, 2019

Sure! I have a few different use cases for such a field:

  1. Currency: I would like to have the dollar sign prefix any number entered and have the commas and decimals as well.
  2. Social Security Number: (xxx-xx-xxxx). I would like the dashes to appear automatically. I would also love for there to be a boolean prop to password mask the field so that I could set up triggers for onFocus (unmask) and onBlur (remask) so that onlookers can't see the SSN.
  3. IP Address: I could see this being useful for IP addresses as well as many other similar uses.

I'm not sure exactly what kind of code sample to provide here, as my request is more conceptual. I'm going to give customization of <Input /> a try per your suggestion, but I think this would be useful as a build in option for many.

Thanks for your time!

@KaiHotz
Copy link
Owner

KaiHotz commented Sep 18, 2019

Give it a try, i'll look into it to maybe add a separate component for a masked Input field.
By the way on the latest version you are able to add a custom onChange handler and value to the <Input /> component, but be aware if you do so you need to set the value in the Formik state with setFieldValue from Formik. But if you know how Formik works you'll figure it out.

Let me know how it goes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant