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

Removing last number with trailing zeros deletes all the right side zeros, when integrating with react-hook-form #835

Open
6 tasks done
pedroapfilho opened this issue Apr 10, 2024 · 5 comments

Comments

@pedroapfilho
Copy link

Describe the issue and the actual behavior

Currently, while integrating a NumberFormatBase with useNumericFormat, and using react-number-format, there's one edge case where we need the value to be a number, and when we type something like 10.10001 and then backspace, it goes to 10.1, and not to 10.000, as expected.

Screen.Recording.2024-04-10.at.10.08.44.mov

Provide a CodeSandbox link illustrating the issue

https://codesandbox.io/p/sandbox/flamboyant-poitras-c7nkld?file=%2Fsrc%2FApp.js%3A24%2C1

Provide steps to reproduce this issue

Type backspace on the input

Please check the browsers where the issue is seen

  • Chrome
  • Chrome (Android)
  • Safari (OSX)
  • Safari (iOS)
  • Firefox
  • Firefox (Android)
@pedroapfilho
Copy link
Author

UPDATE: I can reproduce it without react-hook-form

https://codesandbox.io/p/sandbox/flamboyant-poitras-forked-jjkxkz?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clutsy9gl00063b6lxn9klv4b%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clutsy9gl00023b6l9hc8fr4u%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clutsy9gl00033b6lnli4rmui%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clutsy9gl00053b6l8jchf8cd%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clutsy9gl00023b6l9hc8fr4u%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clutsy9gk00013b6l8fbckltd%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clutt4js200023b6lyh1zg7r5%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A24%252C%2522startColumn%2522%253A16%252C%2522endLineNumber%2522%253A24%252C%2522endColumn%2522%253A16%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clutsy9gl00023b6l9hc8fr4u%2522%252C%2522activeTabId%2522%253A%2522clutt4js200023b6lyh1zg7r5%2522%257D%252C%2522clutsy9gl00053b6l8jchf8cd%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clutsy9gl00043b6lojubw3uv%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clutsy9gl00053b6l8jchf8cd%2522%252C%2522activeTabId%2522%253A%2522clutsy9gl00043b6lojubw3uv%2522%257D%252C%2522clutsy9gl00033b6lnli4rmui%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clutsy9gl00033b6lnli4rmui%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

@pedroapfilho
Copy link
Author

UPDATE: This issue didn't happen on the version 4.9.1: https://codesandbox.io/p/sandbox/flamboyant-poitras-forked-w238km?file=%2Fsrc%2FApp.js%3A2%2C21&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clutsy9gl00063b6lxn9klv4b%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clutsy9gl00023b6l9hc8fr4u%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clutsy9gl00033b6lnli4rmui%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clutsy9gl00053b6l8jchf8cd%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clutsy9gl00023b6l9hc8fr4u%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clutsy9gk00013b6l8fbckltd%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clutt4js200023b6lyh1zg7r5%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A2%252C%2522startColumn%2522%253A21%252C%2522endLineNumber%2522%253A2%252C%2522endColumn%2522%253A21%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clutsy9gl00023b6l9hc8fr4u%2522%252C%2522activeTabId%2522%253A%2522clutt4js200023b6lyh1zg7r5%2522%257D%252C%2522clutsy9gl00053b6l8jchf8cd%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clutsy9gl00043b6lojubw3uv%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clutsy9gl00053b6l8jchf8cd%2522%252C%2522activeTabId%2522%253A%2522clutsy9gl00043b6lojubw3uv%2522%257D%252C%2522clutsy9gl00033b6lnli4rmui%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clutsy9gl00033b6lnli4rmui%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

@pedroapfilho
Copy link
Author

UPDATE: it seems that removing these lines make it work as expected: https://github.com/s-yadav/react-number-format/blob/master/src/utils.tsx#L516-L528

@s-yadav
Copy link
Owner

s-yadav commented Apr 10, 2024

Hey @pedroapfilho, the issue is that RNF currently works partially controlled and partially uncontrolled way. And in this case, when used floatValue on the state, 10.10000 is actually treated as just 10.1 in javascript numbers. So basically the value prop is coming back as 10.1 updating the rendered input.
Try pasting 10.10000 in console, it would be printed as 10.1

Prior to v5 it used to work, because we were comparing floatValue coming from prop and floatValue inside the state, if that not changed we were not rendering the input. But that had some other bugs.

To unblock yourself, I would suggest that for state management use a numeric string value and on submit convert it to a number, Or you can have a custom component which manages the string state and passes the numeric value to parent.
Here's an example:
https://codesandbox.io/p/sandbox/flamboyant-poitras-forked-4j4rzs?file=%2Fsrc%2FApp.js%3A30%2C42

@pedroapfilho
Copy link
Author

Doing it this way introduces some other bugs, in the end it was flaky, and didn't pass the tests that were created to prior. It would be nice to have it fixecd on v6. I'm willing to sponsor the project to make it happen.

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

2 participants