react-formik-ui icon indicating copy to clipboard operation
react-formik-ui copied to clipboard

Implement a robust number field

Open hallcountymis opened this issue 4 years ago • 3 comments

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

hallcountymis avatar Sep 18 '19 15:09 hallcountymis

@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.

KaiHotz avatar Sep 18 '19 15:09 KaiHotz

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!

hallcountymis avatar Sep 18 '19 15:09 hallcountymis

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.

KaiHotz avatar Sep 18 '19 16:09 KaiHotz