You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have a use case in which I'm using iconography with absolute positioning alongside input padding to display the currency for my input field, so I don't want Intl.NumberFormat's required currencyDisplay at all, I just want the number to be formatted properly for the given currency.
I found this SO post which says to set currencyDisplay to "code", which then allows you to string match on the currency and remove/trim everything but the number.
I'm using react-hook-form in my app, so I wrote an intercepting onChange() in my input component that does exactly as that post described, then passes the trimmed value on to RHF's onChange(). Unfortunately it seems that doing all this myself messes up the cursor indexing in the <InputNumberFormat />, because I've lost the ability to make more than one character change at a time without having to arrow-key my way to where I was.
First-class support for a currencyDisplay-less yet currency-formatted input would be amazing!
The text was updated successfully, but these errors were encountered:
tatwater
changed the title
Feature Request:
Feature Request: Extend currencyDisplay to allow "none"
Apr 30, 2024
For reference, here's my onChange intercept (in my re-usable Input component, which wraps <InputNumberFormat /> and includes props for currency code and RHF's onChange()):
I have a use case in which I'm using iconography with absolute positioning alongside input padding to display the currency for my input field, so I don't want
Intl.NumberFormat
's requiredcurrencyDisplay
at all, I just want the number to be formatted properly for the given currency.I found this SO post which says to set
currencyDisplay
to "code", which then allows you to string match on the currency and remove/trim everything but the number.I'm using react-hook-form in my app, so I wrote an intercepting onChange() in my input component that does exactly as that post described, then passes the trimmed value on to RHF's onChange(). Unfortunately it seems that doing all this myself messes up the cursor indexing in the
<InputNumberFormat />
, because I've lost the ability to make more than one character change at a time without having to arrow-key my way to where I was.First-class support for a currencyDisplay-less yet currency-formatted input would be amazing!
The text was updated successfully, but these errors were encountered: