search

s-yadav / react-number-format

React component to format numbers in an input or as a text.
MIT License
3.9k stars 410 forks source link

Attaching a NumberFormat applies the mask but doesn't fire a change event #657

Open asher-feil opened 2 years ago

asher-feil commented 2 years ago

Describe the issue and the actual behavior

I have a case where I have a currency field that we are migrating to use NumberFormat. To deal with pre-existing fields with improper values We are not applying the NumberFormat on edits until the user clicks into the input. When that happens we see the masking take effect(this was done with the specifics props and not a format) but there is no change event fired.

Describe the expected behavior

We want to have a change event so we can pick up the change in value that now matches what is visibly displayed on the screen

Provide a CodeSandbox link illustrating the issue

https://codesandbox.io/s/keen-shirley-7qcssf

Provide steps to reproduce this issue

  1. Click into the input field
  2. notice that the ui has changed but there is no change event to say that the value has been updated

    Please check the browsers where the issue is seen

    • [x] Chrome
    • [ ] Chrome (Android)
    • [ ] Safari (OSX)
    • [ ] Safari (iOS)
    • [ ] Firefox
    • [ ] Firefox (Android)
asher-feil commented 2 years ago

i just tested in Chrome, but I don't imagine this is tied to a browser at all

nikhil-varma commented 2 years ago

@asher-feil Can you please elaborate a little on

To deal with pre-existing fields with improper values We are not applying the NumberFormat on edits until the user clicks into the input.

Also, have you considered upgrading to v5 as there are hooks available which may be of help. For your reference:

Happy to help you further 🙂