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

Feature Request: Extend currencyDisplay to allow "none" #24

Open
tatwater opened this issue Apr 30, 2024 · 1 comment
Open

Feature Request: Extend currencyDisplay to allow "none" #24

tatwater opened this issue Apr 30, 2024 · 1 comment

Comments

@tatwater
Copy link

tatwater commented Apr 30, 2024

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!

@tatwater tatwater changed the title Feature Request: Feature Request: Extend currencyDisplay to allow "none" Apr 30, 2024
@tatwater
Copy link
Author

tatwater commented 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()):

const onCurrencyChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  const value = event.target.value;
  const strippedValue = value.replace(currency, "").trim();
  event.target.value = strippedValue;
  onChange(event);
}

I then set <InputNumberFormat />'s onChange to my onCurrencyChange() function instead of RHF's onChange().

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