search

Altinn / app-frontend-react

Altinn application React frontend
BSD 3-Clause "New" or "Revised" License
18 stars 31 forks source link

React Number Format v5 - decimal bug #1144

Open lassopicasso opened 1 year ago

lassopicasso commented 1 year ago

Description of the bug

Input that uses formatting (React Number Format) breaks the pointer/marker behavior when it contains suffix with more than one character and decimal separator.

When enter the dot-key (as decimal separator) in input field, the pointer/marker will focus infront of decimal separator. So if user keeps writing, the decimal separator disappears. In other words, user has to change the focus of pointer/marker after enter decimal.

This problem occurred after the release of version 5 of RNF. This hopefully solves in next update of React Number Format. Then maybe add some extra tests with numbers containing decimals in e2e formatting.ts.

It has already been created an issue for this to the react-number-format team: https://github.com/s-yadav/react-number-format/issues/725

Steps To Reproduce

  1. Go to an app with input number field.
  2. Config so it use formatting (React Number Format)
  3. Select Norwegian as app language
  4. Enter dot-key and see that markor is infront of the decimal separator.

Additional Information

https://github.com/Altinn/app-frontend-react/pull/1132 No response

bjosttveit commented 1 year ago

Looks like this has just been fixed and a new version has been released: https://github.com/s-yadav/react-number-format/releases/tag/v5.2.0

framitdavid commented 1 year ago

I have updated the React Number Format NPM package within @digdir/designsystem. My changes should be included in the next release of @digdir/designsystem.

Changes: https://github.com/digdir/designsystem/pull/413

cc: @lassopicasso

lassopicasso commented 1 year ago

Well done! 💯